Gulp less then minimize task

Question

I need to do 2 steps in gulp:

• Make the .css form smaller
• Collapse created 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 run it, only the first step is performed. Help me please.

Answer 1

No need after time, a convenient 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 2

You should keep in mind that with gulp you can just chain operations to the glob pattern.

Not quite sure why you need gulp.watch when you can use the built-in observer, this plugin is useful in difficult situations, and it’s not, but you can stick with it if you really want to,

Remember to return your thread so that gulp knows when the task is complete.

I also usually wrap all my watchers in one watch task , no need to separate them.

For 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

The best of both worlds could be adding gulp.watch to the default gulp.task, and if you need browser synchronization, it will reboot when you make any changes to the observed folders, 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]); }); 

Answer 4

So I did it with sass. The view is the same with a smaller one.

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

• Get sas
• Convert it to css and create a file
• Get this file and minimize it.

So, the structure will 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")); }); 

A new answer has been added in case someone wants the same as me.