Gulp less and then minify task

Question

I have to make 2 steps in gulp:

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

This is my 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.

Answer 1

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

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.

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.

Answer 2

You should keep in mind that with gulp you could simply chain operations on a glob pattern.

Don't really sure why you need gulp.watch when 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.

Don't forget to return your stream so gulp knows when a task is finished.

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

To me, your gulpfile should look like this:

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

Answer 3

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

Answer 4

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:

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