javascript 减少吞咽然后缩小任务

Gulp less and then minify task

提问by JAYBEkster

I have to make 2 steps in gulp:

我必须在 gulp 中执行 2 个步骤：

1. Make a .css file form less
2. Minify generated css files

1. 减少 .css 文件形式
2. 缩小生成的 css 文件

This is my gulpfile:

这是我的 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']);

When i start it only first step is done. Help me please.

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

回答by Balthazar

You should keep in mind that with gulpyou could simply chain operations on a globpattern.

你应该记住，gulp你可以简单地将操作链接到一个glob模式上。

Don't really sure why you need gulp.watchwhen you can use the built-in watcher, this plugin is useful on tricky situations and that's don't seems be the case here, but you can stick with it if you really want to.

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

Don't forget to returnyour stream so gulpknows when a task is finished.

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

I also generally wrap all my watchersinside one watch task, not need to separate them.

我也一般都包watchers在里面watch task，不需要分开。

To me, your gulpfile should look like this:

对我来说，你的 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']);

回答by JAYBEkster

There is no needing after time, convinient solution for me was:

以后不需要，对我来说方便的解决方案是：

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

回答by MelissaMMDP

Best of both worlds might be to add the gulp.watch to the default gulp.task and if you require browser-sync it will reload when you make any changes to the folders being watched as shown below:

两全其美的方法可能是将 gulp.watch 添加到默认的 gulp.task 中，如果您需要浏览器同步，它会在您对正在监视的文件夹进行任何更改时重新加载，如下所示：

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

回答by Sanchitos

This is the way I did it with sass. Kind of the same with less.

这就是我用 sass 做的方式。少一点也一样。

The difference with the previous answers is that I wanted one more step:

与之前的答案不同的是，我还想再多走一步：

1. Get the sass
2. Transform it into a css and create the file
3. Get that file and minify it.

1. 得到 sass
2. 将其转换为 css 并创建文件
3. 获取该文件并将其缩小。

So the structure would be like this:

所以结构会是这样的：

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"));
});

Added a new answer in case someone want the same thing as me.

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