Livereload для файлов css иногда не работает в gulp

У меня есть небольшой список .scss, которые будут преобразованы в css с помощью gulp-sass. Процесс преобразования работает очень быстро менее чем за 5 мс.

Но перезагрузка файлов css с помощью gulp-connect плагина занимает около 3s времени, а иногда даже не работает вообще, и мне приходится снова сохранять .scss файл, чтобы увидеть результат в браузере. Протестировано с/без расширения Livereload для хрома.

Почему?

Моя задача Sass:

gulp.task('sass', function() {
    gulp.src(['source/sass/*.scss'])
    .pipe(sass({
        outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('source/assets/css'))
    .pipe(connect.reload());
});

Моя часовая задача:

gulp.task('watch', function () {
  gulp.watch(['source/sass/**/*.scss'], ['sass']);
});

Моя задача подключения:

gulp.task('connectDev', function() {
  connect.server({
    root: 'source',
    port: 8001,
    livereload: true
  });
});

И задача по умолчанию:

gulp.task('default', ['sass', 'connectDev', 'watch']);

gulp livereload
person Morteza Ziyae    schedule 30.06.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я точно не знаю, что произошло, но добавление .on( 'error', gutil.log ) после reload() и sass() решило проблему.

gulp.task('sass', function() {
    gulp.src(['source/sass/*.scss'])
    .pipe(sass({
        outputStyle: 'expanded'
    })).on( 'error', gutil.log )
    .pipe(gulp.dest('source/assets/css'))
    .pipe(connect.reload()).on( 'error', gutil.log );
});

Возможно, это как-то вызывает перезагрузку.

Также разделение .pipe(connect.reload()) вызывало отставание и сбой. как это:

gulp.task('sass', function() {
    gulp.src(['source/sass/*.scss'])
    .pipe(sass({
        outputStyle: 'expanded'
    })).on( 'error', gutil.log )
    .pipe(gulp.dest('source/assets/css'))
    .pipe(connect.reload()).on( 'error', gutil.log );
});

gulp.src('source/assets/**/*.css')
.pipe(connect.reload()).on( 'error', gutil.log );
person Morteza Ziyae    schedule 30.06.2014

arrow_upward
0
arrow_downward

Вот простое и проверенное решение для прямой загрузки на основе connect сервера и connect-livereload и gulp-livereload плагинов, которые у меня работают очень быстро:


var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');

var config = {
    rootDir: __dirname,
    servingPort: 8080,

    // the files you want to watch for changes for live reload
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js', '!karma.conf.js', '!protractor.conf.js']
}

// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);

gulp.task('watch', ['connect'], function () {
  gulpLivereload.listen();
  gulp.watch(config.filesToWatch, function(file) {
    gulp.src(file.path)
      .pipe(gulpLivereload());
  });
});

gulp.task('serve', ['connect'], function () {
  return opn('http://localhost:' + config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});
person Dmitri Zaitsev    schedule 19.04.2015