10

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.

Improve this question

4 Answers 4

Reset to default
20

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']);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I use gulp.watch to detect new created file when gulp has already started.
Okay you can stick with it anyway it's not the main content of my answer :)
11

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

Comments

2

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.