Gulp 没有执行 minify-CSS

Question

这是我拥有的：

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');

// GULP WATCH
gulp.task('watch', function() {
   gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
  return gulp.src('assets/*.css')
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', function() {
  return gulp.src('assets/css/style.css')
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','cleanCSS','minify-css']);

我的问题：

当我最初运行gulp时，它可以很好地工作。当我保存文件时，执行的唯一函数是sass，但是我的站点文件链接到缩小的CSS，因此我需要每个功能才能工作，否则我看不到更改。一旦我添加了任务minify-css，就开始了这个问题。

---

V2 UPDATE

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
    gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
  return gulp.src('assets/*.css')
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', ['cleanCSS'], function() {
  return gulp.src('assets/css/style.css')
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','minify-css']);

Answer 1

据我所知，有三个选择。

选项1 - 最不优选但最少的更改

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');

// GULP WATCH
gulp.task('watch', function() {
   gulp.watch('assets/sass/*.sass', ['sass', 'cleanCSS', 'minify-css']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
  return gulp.src('assets/*.css')
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', function() {
  return gulp.src('assets/css/style.css')
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','cleanCSS','minify-css']);

当您的默认任务正在运行所有四个任务（SASS，Watch，CleanCSS和Minify-CSS）时，当手表任务通知您的一个.sass文件中，它只会重新运行SASS任务（而不是默认任务再次运行全部四个）。这不是首选，因为我相信Gulp并行运行这些任务，并且不能保证按顺序运行或等待一个人在下一次运行之前完成。

选项2 - 更好，但仍然不是最佳

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
    gulp.watch('assets/sass/*.sass', ['minify-css']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', ['sass'], function(){
  return gulp.src('assets/*.css')
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', ['cleanCSS'], function() {
  return gulp.src('assets/css/style.css')
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch',]);

这更有声明性。现在，运行Gulp将执行默认任务，该任务将启动SASS并观察任务。Minify-CSS取决于CleanCSS，因此Gulp将尝试运行CleanCSS任务，但这取决于SASS，因此它将首先运行，然后将CleanCSS，然后是Chinify-CSS缩小。当观察注意到更改时，它将重新升级CSS，但会看到依赖关系链并再次运行。

选项3 - 最佳Gulp与Grunt不同，因为它使用流，因此不必在每个任务之间写入磁盘。在操作它们的同时将文件保持在内存中，使其运行速度更快。如果所有这些任务都需要所有时间运行，最好的方法是将它们组合成一个类似以下内容。

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');

// GULP WATCH
gulp.task('watch', function() {
   gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch']);

这将一次读取文件并将其写入一次。默认任务将执行SASS任务，当注意到更改时，请注意任务。

希望这会有所帮助！