Gulp手表打破生產文件

Question

因此，我遇到了一個問題，即運行我的gulp watch任務會破壞我的構建。 僅當我編輯.scss文件並且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任務檢測到此情況並再次返回“ default”任務，從頭再來。
3. 打開瀏覽器並導航到站點以查看應用的樣式 ：這是斷點，所有樣式都已刪除，css的“ gulp.dest”文件（我已經丑化並傳遞到分發文件夾中）為空白。
4. gulp ：取消先前的gulp進程並再次運行可解決此問題。 導航回/ dist中的css文件-所有樣式都在那里。

長話短說，只有當我“主動”編輯.scss文件時，我的樣式才會刪除，而gulp watch任務會調用必要的任務以將文件構建到生產文件夾中，以便相關文檔可以看到這些更改。

Answer 1

成為gulp的新手，並且遇到了類似的問題，我通過以下方法解決了這個問題： 如何依次依次運行Gulp任務 ，您可以嘗試以下操作：

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