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 - best 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, как и задача наблюдения, когда она заметит изменения.

Надеюсь это поможет!