javascript - Gulp watch 破坏了生产文件

Question

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

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

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

这是我的gulp文件

//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”文件(我已经丑化并传递到分发文件夹中)是空白的。
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');
});