css 文件的 Livereload 有时在 gulp 中不起作用答案

【问题标题】：Livereload for css files sometimes dont works in gulpcss 文件的 Livereload 有时在 gulp 中不起作用
【发布时间】：2014-06-30 09:09:48
【问题描述】：

我有一个.scss 的小列表，它将被 gulp-sass 转换为 css。 转换过程非常快不到 5 毫秒。

但是使用 gulp-connect 插件重新加载 css 文件需要大约 3s 的时间，甚至有时根本不起作用，我必须再次保存 .scss 文件才能在浏览器中查看结果。测试有/没有Livereload chrome 扩展。

为什么？

我的 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

【解决方案1】：

我不知道到底发生了什么，但在 reload() 和 sass() 问题解决后添加 .on( 'error', gutil.log )。

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 );

【讨论】：

【解决方案2】：

这是一个基于connect 服务器和connect-livereload 和gulp-livereload 插件的simple and tested livereload solution，它们对我来说运行得非常快：


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);
});

【讨论】：