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

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

gulp ：这会运行默认任务（这不会破坏样式）
编辑ide中的.scss文件：我想对我的样式进行更改，因此我编辑该文件，gulp watch任务检测到这一点并返回＆＃39;默认＆＃39;再次完成任务，重新开始循环。
打开浏览器并导航到网站以查看应用的样式：这是它破坏的地方，我的所有样式都被移除了，＆＃39; gulp.dest＆＃39;我的css文件（我已经发布并传入分发文件夹）是空白的。
gulp ：取消之前的gulp进程并再次运行它可以解决问题。导航回/ dist中的css文件 - 所有样式都在那里。

长话短说，我的风格只有在我积极地消除时才被删除。编辑.scss文件，gulp watch任务调用必要的任务来将文件构建到生产文件夹中，因此相关文档可以看到这些更改。

Answer 1

我自己是一个喝酒的新手，并且遇到了类似的问题，我通过查看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');
});

Gulp手表打破了生产文件

1 个答案: