Question

我最近从grunt切换到gulp，到目前为止已成功配置gulp来做我想要的事情。我遇到的唯一问题是livereload，我发现我必须保存两次才能在浏览器中看到已编译的sass。萨斯似乎被推迟了

有没有办法可以确保在编译sass之前不执行livereload？这是我的配置：

// Dependencies
var gulp        = require('gulp');
var watch       = require('watch');
var livereload  = require('gulp-livereload');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer'); 
var cssmin      = require('gulp-cssmin');
var rename      = require('gulp-rename');
var uglify      = require('gulp-uglify');
var concat      = require('gulp-concat');
var plumber     = require('gulp-plumber');
var notify      = require('gulp-notify');

onError = function(error){  
    notify.onError({
        title:    "Gulp",
        subtitle: "Failure!",
        message:  "<%= error.message %>",
        sound:    "Beep"
    })(error);

    this.emit('end');
};

// Watch
gulp.task('watch', function(){
    gulp.watch('src/css/**/*.scss', ['sass']).on('change', livereload.changed);
    gulp.watch('src/js/**/*.js', ['concat']).on('change', livereload.changed);
    gulp.watch('*').on('change', livereload.changed);
});

// Sass
gulp.task('sass', function(){
    gulp.src('src/css/style.scss')
        .pipe(plumber({errorHandler: onError}))
        .pipe(sass({style: 'expanded'}))
        .pipe(prefix('last 4 versions', 'ie 8', 'ie 9'))
        .pipe(gulp.dest('src/css/build'))
        .pipe(cssmin())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('dist/css'))
});

// Concat
gulp.task('concat', function(){
    gulp.src(['src/js/models/*.js', 'src/js/views/*.js', 'src/js/controllers/*.js'])
        .pipe(plumber({errorHandler: onError}))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('src/js/build'))
        .pipe(uglify())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('dist/js'))
})

// Default
gulp.task('default', ['watch'], function(){
        livereload.listen();
});

Answer 1

您当前的watch任务告诉gulp一旦您的某个sass文件发生更改，就会立即运行livereload ，而不是等待sass任务完成。

根据gulp-livereload documentation：

添加.pipe(livereload())作为sass任务
的最后一步
从您的sass文件livereload.change任务中删除watch步骤。

这将确保在编译css之后，在你的sass任务中，livereload步骤将始终发生。

Gulp livereload问题（保存两次）

1 个答案: