必须多次运行 gulp 才能更改样式

Question

我在编译我的 CSS 时遇到问题，当我对我的 SASS 文件进行更改时，它不会更改最终文件，只是在尝试了多次之后。

var gulp = require('gulp'); var sass = require('gulp-sass'); var rename = require('gulp-rename'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssnano = 需要('cssnano'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); //CSS 任务 gulp.task('样式', function() { console.log("编译 SASS"); gulp.src('app/sass/style.scss') .pipe(sass().on('error', sass.logError)) .pipe(postcss([ autoprefixer() ])) .pipe(重命名('999_style.css')) .pipe(gulp.dest('app/css/')); }); gulp.task('stylescompress', ['styles'], function() { console.log("合并和移动样式文件夹中的所有 css 文件"); gulp.src("app/css/**.css") .pipe(concat('style.css')) .pipe(postcss([ cssnano() ])) .pipe(gulp.dest('css/')); }); //Javascript 任务 gulp.task('jscompress', function() { //console.log("连接和移动 javascript 文件夹中的所有 js 文件"); gulp.src("app/js/**.js") .pipe(concat('scripts.js')) .pipe(gulp.dest('js/')) .pipe(重命名('scripts.min.js')) .pipe（丑化（）） .pipe(gulp.dest('js/')) }); //看任务 gulp.task('default',function() { gulp.watch(['app/sass/**/*.scss'],['stylescompress']) .on('改变', 函数(事件) { console.log('SASS - 文件 ' + event.path + ' 是 ' + event.type + '，正在运行的任务...'); }); gulp.watch(['app/js/**/*.js'],['jscompress']) .on('改变', 函数(事件) { console.log('SCRIPTS - 文件 ' + event.path + ' 是 ' + event.type + '，正在运行的任务...'); }); });

如您所见，我根据 Gulp Docs 使用了所有，但我没有发现发生了什么。

Answer 1

安装浏览器同步 并添加

var browserSync = require('browser-sync').create();

在你的 sass 任务中添加 browserSync

gulp.task('sass', function() {
    console.log("Compilling SASS");
    gulp.src('app/sass/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([ autoprefixer() ]))
    .pipe(rename('999_style.css'))
    .pipe(gulp.dest('app/css/'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

然后添加一个“监视”任务

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

然后在你的“默认”中

gulp.task('default', function(callback) {
  runSequence(['sass', 'browserSync', 'watch'],
    callback
  )
})

现在运行 gulp watch :)

Answer 2

我错过了完成时间的返回，让 Gulp 了解它应该何时调用下一个任务，它记录在 Gulp Docs

我使用流让 gulp 了解每个任务何时结束，如下所示：

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});