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 更新

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）时，当 watch 任务注意到您的 .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 和 watch 任务。 minify-css 依赖于 cleanCSS，所以 gulp 会尝试运行 cleanCSS 任务，但这依赖于 sass，所以它会先运行那个，然后是 cleanCSS，然后是 minify-css。当 watch 注意到变化时，它会重新运行 minify-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 任务，watch 任务也会在它注意到变化时执行。

希望这会有所帮助！