javascript - 少吃一点然后缩小任务

我必须做两个步骤:

减少.css文件格式

最小化生成的css文件

这是我的gulpfile:

var gulp = require('gulp'),
    watch = require("gulp-watch"),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),
    rename = require('gulp-rename');

gulp.task('watch-less', function () {
    watch({glob: './*.less'}, function (files) { // watch any changes on coffee files
        gulp.start('compile-less'); // run the compile task
    });

    watch({
        glob: ['./*.css', '!./*.min.css']
    }, function(files) {
        gulp.start('minify-css'); // run the compile task
    });
});

gulp.task('compile-less', function () {
    gulp.src('./*.less') // path to your file
    .pipe(less().on('error', function(err) {
        console.log(err);
    }))
    .pipe(gulp.dest('./'));
});

gulp.task('minify-css', function() {
    gulp.src([
        './*.css',
        '!./*.min.css'
    ])
    .pipe(cssmin().on('error', function(err) {
        console.log(err);
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./'));
})

gulp.task('default', ['watch-less']);

当我开始时，只有第一步完成了。
请帮帮我。

最佳答案

您应该记住，使用gulp可以简单地在glob模式上链接操作。

不太确定为什么可以使用内置观察器时需要gulp.watch，此插件在棘手的情况下很有用，这里似乎不是这种情况，但是如果您确实愿意，可以坚持使用。

不要忘记对流进行return，以便gulp知道任务何时完成。

通常，我也将所有watchers包装在一个watch task中，而不需要将它们分开。

对我来说，您的gulpfile应该如下所示:

var gulp = require('gulp'),
    less = require('gulp-less'),
  cssmin = require('gulp-cssmin'),
  rename = require('gulp-rename');

gulp.task('watch', function () {
  gulp.watch('./*.less', ['less']);
});

gulp.task('less', function () {

  return gulp.src('./*.less')
    .pipe(less().on('error', function (err) {
      console.log(err);
    }))
    .pipe(cssmin().on('error', function(err) {
      console.log(err);
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./'));

});

gulp.task('default', ['less', 'watch']);

关于javascript - 少吃一点然后缩小任务，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25160597/