Question

我必须在gulp中做两个步骤：

缩小.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']);

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

Answer 1

您应该记住，使用gulp，您只需将操作链接到glob模式。

当你可以使用内置的观察者时，不确定为什么你需要gulp.watch，这个插件在棘手的情况下很有用，而且这似乎不是这里的情况，但你可以坚持下去如果你真的想。

不要忘记return您的信息流，以便gulp知道任务何时完成。

我通常也会将watchers所有watch task包裹在一个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']);内，而不需要将它们分开。

对我来说，你的gulpfile应该是这样的：

{{1}}

Answer 2

没有必要在一段时间后，对我来说方便的解决方案是：

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

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

gulp.task('less', function () {
    gulp.src('./styles/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('./styles/'))
        .pipe(cssmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./styles'))

});

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

Answer 3

两个世界中最好的可能是将gulp.watch添加到默认的gulp.task中，如果您需要浏览器同步，当您对正在观看的文件夹进行任何更改时它将重新加载，如下所示：

＆＃13;

var gulp = require('gulp'),
  less = require('gulp-less'),
  cssmin = require('gulp-cssmin'),
  rename = require('gulp-rename'),
  browser = require('browser-sync');

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('server', function() {
  browser({
    server: {
      baseDir: './'
    }
  });
});

gulp.task('default', ['less', 'server'], function() {
  gulp.watch('./*.less', ['less', browser.reload]);
});

＆＃13;

Answer 4

这是我用sass做的方式。种类与此相同。

与之前答案的不同之处在于我还想再做一步：

获取sass
将其转换为css并创建文件
获取该文件并缩小它。

所以结构会是这样的：

test.scss
  test.css
    test.min.css

var gulp = require("gulp"),    
  sass = require("gulp-sass"),
  rename = require("gulp-rename");


var paths = {
  webroot: "./wwwroot/"
};

paths.scss = paths.webroot + "css/**/*.scss";

gulp.task('sass', function() {
  gulp.src(paths.scss)
    .pipe(sass())
    .pipe(gulp.dest(paths.webroot + "css"))
    .pipe(cssmin())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.webroot + "css"));
});

添加了一个新答案，以防有人想和我一样。

吞咽少量然后缩小任务

4 个答案: