我怎样才能看到autoprefixer和minify?

时间:2016-08-17 23:58:41

标签: gulp gulp-watch gulp-autoprefixer gulp-minify-css

我的文件夹结构包含一个名为“production”的目录,其中包含style.css,我正在编写的文件...我有另一个名为“css”的目录,它是我的autoprefixed style.css文件的目标。我设置的监视任务完全适用于autoprefixer但是minify任务在使用缩小版本覆盖新创建的autoprefixed css时无法通过监视任务工作。我是新来的...我会非常感谢任何帮助!

以下是我正在做的事情:

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

1 个答案:

答案 0 :(得分:0)

你可以像这样一起连接两个任务:

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