Frage

Ich habe jetzt alle drei Methoden ausprobiert, die ich finden kann, um Livereload mit Gulp zu verwenden, und es scheint, dass ich immer noch auf das gleiche Problem stoße.

Ich starte meine Gulp-Datei und sie läuft einwandfrei, also gehe ich in meine Partials und nehme eine kleine Änderung vor (ändere zum Beispiel einen h1-Tag von thomas in chomas) und speichere.Mein Protokoll zeigt, dass die Vorlagen kompiliert werden. Je nachdem, welche Methode ich für Livereload verwendet habe, wird dann auch protokolliert, dass Änderungen vorgenommen wurden (also Ist Veränderungen erkennen).Abschließend führt mein Browser eine vollständige Aktualisierung durch, die Änderungen werden jedoch immer noch nicht im Browser angezeigt.Wenn ich meinen Browser manuell aktualisiere, sehe ich die Änderungen immer noch nicht.

Die einzige Möglichkeit, die ich gefunden habe, um zu sehen, dass sich die Änderung im Browser widerspiegelt, besteht darin, gulp selbst manuell neu zu starten, um die Änderungen zu sehen.

Gulp-Datei:

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']);
  • Ich verwende Windows.
  • Ich habe das Livereload-Plugin installiert.
  • Ich habe das alles auf Chrome verwendet.
  • Die Dateien werden über einen Apache-Server ausgeführt (möglicherweise handelt es sich hierbei um ein Cache-Problem).
  • Aber ich habe es mit einem Express-Server außerhalb von Apache versucht, mit den gleichen Ergebnissen.
  • Ich habe auch sowohl Browser-Sync als auch versucht gulp-livereload Plugin
War es hilfreich?

Lösung

Versuchen Sie, diese Zeile zu ändern:

.pipe(swig())

dazu:

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top