Question

J'ai maintenant essayé les trois méthodes que je peux trouver pour utiliser livereload avec Gulp et il me semble que je rencontre toujours le même problème.

Je démarre mon fichier gulp et il fonctionne très bien, alors je vais dans mes partiels et fais une petite modification (changer une balise h1 de thomas en chomas par exemple) et j'enregistre.Mon journal montre que les modèles sont en cours de compilation, puis selon la méthode que j'ai essayé d'utiliser pour livereload, il enregistrera également que des modifications ont été apportées (donc est détecter les changements).Enfin, mon navigateur effectuera une actualisation complète, mais les modifications ne seront toujours pas reflétées dans le navigateur.Si j'actualise manuellement mon navigateur, je ne vois toujours pas les modifications.

La seule façon que j'ai trouvée pour voir le changement se refléter dans le navigateur est de redémarrer manuellement gulp moi-même afin de voir les changements.

Fichier Gulp :

var gulp = require('gulp');

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var swig = require('gulp-swig');
var livereload = require('gulp-livereload');


var paths = {
  scripts: ['./js/**/*.js'],
  images: './img/**/*',
  css: './css/**',
};

var filesToMove = [
        './css/**',
        './fonts/**/*.*',
        './favicon.png',
        './adoption-form.pdf'
    ];


gulp.task('move', function(){
  gulp.src(filesToMove, { base: './' })
  .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function() {
  return gulp.src(paths.scripts)
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('./build/js'));
});

gulp.task('templates', function() {
  gulp.src('./partials/**/*.html')
    .pipe(swig())
    .pipe(gulp.dest('./build/'))
    .pipe(livereload());
});

gulp.task('images', function() {
  return gulp.src(paths.images)
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('./build/img'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch('./partials/**/*.html', ['templates']);
  gulp.watch(paths.images, ['images']);
  gulp.watch(paths.css);  
});

gulp.task('default', ['watch', 'scripts', 'templates', 'images', 'move']);
  • Je suis sous Windows.
  • J'ai installé le plugin livereload.
  • J'utilise tout cela sur Chrome.
  • Les fichiers s'exécutent via un serveur Apache (il s'agit peut-être d'un problème de cache).
  • Mais j'ai essayé un serveur express en dehors d'Apache, mêmes résultats.
  • J'ai également essayé la synchronisation du navigateur et le gulp-livereload brancher
Était-ce utile?

La solution

Essayez de changer cette ligne :

.pipe(swig())

pour ça:

.pipe(swig({ defaults: { cache: false } }))

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top