Search code examples
javascriptnode.jsgulp

Gulp less and then minify task


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.


Solution

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