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)时，当监视任务注意到其中一个.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，然后运行minify-css。当watch注意到更改时，它将重新运行minify-css，但会看到依赖链并再次运行它们。

选项3 -最好的gulp不同于咕噜，因为它使用流，这样就不必在每个任务之间写入磁盘。将文件保存在内存中，同时操作它们，可以使其运行得更快。如果所有这些任务都需要一直运行，最好是将它们合并成一个类似于以下内容的任务。

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任务，监视任务在注意到更改时也会执行。

希望这能有所帮助！