Question

我有一小段.scss，会被gulp-sass转换为css。 转换过程可以在不到5毫秒内完成。

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

为什么吗

我的萨斯任务：

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

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

Answer 2

以下是基于connect服务器的simple and tested livereload solution以及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);
});

用于css文件的Livereload有时不适用于gulp

2 个答案: