如何让 gulp 同时观看 autoprefixer 和 minify？

Question

我的文件夹结构由一个名为 "production" 的目录组成，其中包含 style.css，我正在其中写入的文件...我有另一个名为 "css" 的目录，它是我的自动前缀 style.css 文件的目的地。我设置的 watch 任务非常适合 autoprefixer，但 minify 任务无法通过 watch 任务使用缩小版本覆盖新创建的 autoprefixed css。我是 gulp 的新手...任何帮助将不胜感激！

这是我正在做的事情：

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');

gulp.task('styles',function() {
    gulp.src('production/style.css')
        .pipe(autoprefixer())
        .pipe(gulp.dest('css'))
});

gulp.task('minify-css',function() {
    gulp.src('css/style.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('css'));
});

gulp.task('watch',function() {
    gulp.watch('production/style.css', ['styles']);
    gulp.watch('css/style.css', ['minify-css']);
});

文件结构：

-web-project
   -css
      -style.css

   gulpfile.js
   index.html

   -node_modules

   package.json

   -production
      -style.css

Answer 1

您可以像这样将两个任务连接在一起：

gulp.task('jade',function() {
gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));
}

如何让 gulp 同时观看 autoprefixer 和 minify？

how do I get gulp to watch both autoprefixer and minify?

gulp

gulp-watch

gulp-minify-css

gulp-autoprefixer