Gulp watch 破坏了生产文件

Question

但是，我遇到了一个问题，即运行我的 gulp watch 任务会破坏我的构建；这只发生在我编辑 .scss 文件并且 gulp 检测到更改时。

例如，样式已正确应用于我网站上的特定文档。我通过调用 gulp 开始观察我的资产。我运行gulp 来调用默认任务（它可以正确构建所有内容，连接我的资产等）

这不会破坏我的生产文件。直到我编辑文件（并且 gulp 检测到并再次运行必要的任务）才会发生这种情况。

这是我的 gulpfile

//Node dependencies 
var gulp = require('gulp'),
    minifyCSS = require('gulp-clean-css'),
    minifyJS = require('gulp-uglify'),
    rename = require('gulp-rename'),
    sass = require('gulp-sass'),
    pump = require('pump'),
    sync = require('run-sequence');

//Sass transpilation task
gulp.task('sass', function(cb) {
  pump([
    gulp.src('app/scss/*.scss'),
    sass(),
    gulp.dest('app/css')
  ], cb);
});

//Uglify CSS task
gulp.task('ugCSS', function(cb) {
  pump([
    gulp.src('app/css/*.css'),
    minifyCSS(),
    rename({
      suffix: ".min"
    }),
    gulp.dest('dist/css')
  ], cb);
});

//Uglify JS task
gulp.task('ugJS', function(cb) {
  pump([
    gulp.src('app/js/*.js'),
    minifyJS(),
    rename({
      suffix: ".min"
    }),
    gulp.dest('dist/js')
  ], cb);
});

//Watch task
gulp.task('watch', function() {
  return gulp.watch('app/scss/*.scss', ['default']);
});

//Default task to make sure everythings runs syncronously
gulp.task('default', function(callback) {
  sync('sass', 'ugCSS', 'ugJS', 'watch', callback);
});

如果我说的没有道理，我会系统地列出我是如何调用这个问题的。

1. gulp：这会运行默认任务（这不会破坏样式）
2. 在 ide 中编辑 .scss 文件：我想更改我的样式，所以我编辑了文件，gulp watch 任务检测到这一点并再次返回“默认”任务，重新开始循环再次。
3. 打开浏览器并导航到站点以查看应用的样式：这是它中断的地方，我的所有样式都已删除，我的 css 的 'gulp.dest' 文件（我已经 uglified 并通过了到分发文件夹）是空白的。
4. gulp：取消之前的 gulp 进程并再次运行它可以解决问题。导航回 /dist 中的 css 文件 - 所有样式都在那里。

长话短说，只有当我“主动”编辑.scss 文件并且 gulp watch 任务调用必要的任务将文件构建到生产文件夹中时，我的样式才会被删除，因此相关文档可以看到这些更改。

Answer 1

我自己是 gulp 的新手，遇到了类似的问题，我通过查看：How to run Gulp tasks sequentially one after the other 解决了这个问题，您可以尝试以下方法：

//Sass transpilation task
gulp.task('sass', function() {
  return gulp.src('app/scss/*.scss') // return solved my problem
             .pipe(sass()/*.on('error', sass.logError)*/) // optional on error
             .pipe(dest('app/css'));
});

//Uglify CSS task
gulp.task('ugCSS', function() {
  return gulp.src('app/css/*.css')
             .pipe(minifyCSS())
             .pipe(rename({suffix: ".min"})
             .pipe(dest('dist/css'));
});

//Uglify JS task
gulp.task('ugJS', function() {
  return gulp.src('app/js/*.js')
             .pipe(minifyJS())
             .pipe(rename({suffix: ".min"})
             .pipe(dest('dist/js'));
});

//Watch task
gulp.task('watch', function() {
  return gulp.watch('app/scss/*.scss', ['default']);
});

//Default task to make sure everythings runs syncronously
gulp.task('default', function() {
  sync('sass', 'ugCSS', 'ugJS');
});