简体   繁体   中英

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

my folder structure consists of a directory called "production" which houses style.css, the file that I'm writing in... I have another directory called "css" which is the destination for my autoprefixed style.css file. The watch task I have set up works perfectly for the autoprefixer but the minify task does not work through the watch task in overriding the newly created autoprefixed css with a minified version. I'm new to gulp... any help would be greatly appreciated!

Here is what I'm doing:

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']);
});

File Structure:

-web-project
   -css
      -style.css

   gulpfile.js
   index.html

   -node_modules

   package.json

   -production
      -style.css

You can just concat two tasks together like this:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM