我必须做两个步骤:

  • 减少.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/

    10-16 21:24