I have a scenario where a client of mine wants to drop LESS files into a src directory (via FTP), and for them to be automatically outputted as CSS to a build directory. For each LESS file, once its resultant CSS file is created, it should be removed from the src directory. How can I do this with Gulp?

My current gulpfile.js is:

var gulp = require("gulp");
var watch = require("gulp-watch");
var less = require("gulp-less");

watch({ glob: "./src/**/*.less" })
  .pipe(less())
  .pipe(gulp.dest("./build"));

This successfully detects new LESS files being dropped into the src directory and outputs CSS files into build. But it doesn't clean up the LESS files afterwards. :(

I have a scenario where a client of mine wants to drop LESS files into a src directory (via FTP), and for them to be automatically outputted as CSS to a build directory. For each LESS file, once its resultant CSS file is created, it should be removed from the src directory. How can I do this with Gulp?

My current gulpfile.js is:

var gulp = require("gulp");
var watch = require("gulp-watch");
var less = require("gulp-less");

watch({ glob: "./src/**/*.less" })
  .pipe(less())
  .pipe(gulp.dest("./build"));

This successfully detects new LESS files being dropped into the src directory and outputs CSS files into build. But it doesn't clean up the LESS files afterwards. :(

• javascript
• node.js
• file
• gulp
• mv

2 Answers 2

Use gulp-clean.

It will clean your src directory once you piped it. Of course, test it on a backup with different settings, and if you can't manage to make it work properly, don't hesitate to make a second task and use some task dependency to run the clean after your less task is pleted.

If I'm right, when I tried to pipe gulp-clean after the gulp.dest, something went wrong, so I got another way to do this, here's an example with task dependency.

var gulp = require('gulp'),
    less = require('gulp-less'),
    clean = require('gulp-clean');

gulp.task('pile-less-cfg', function() {
    return gulp.src('your/less/directory/*.less')
               .pipe(less())
               .pipe('your/build/directory'));
});

gulp.task('remove-less', ['less'], function(){
    return gulp.src('your/less/directory)
               .pipe(clean());
});

That's for the not-watching task. Then, you should use a watch on the *.less files, but you should get task remove-less running instead of less. Why ? Because of task dependency.

When you'll call the remove-less task, it will only start once the less task is plete. That way, the files will only be deleted once your less pilation is over, and not in the middle of it throwing errors.

It may not be the perfect method to get this working as I'm not an expert, but it's a safe and working solution for you to use. Also it's pretty clear to understand IMO.

gulp-clean is deprecated. Use the npm module del.

npm install --save-dev del

Here is how you should use it.

var gulp = require('gulp');
var del = require('del');

gulp.task('clean:mobile', function () {
  return del([
    'dist/report.csv',
    // here we use a globbing pattern to match everything inside the `mobile` folder
    'dist/mobile/**/*',
    // we don't want to clean this file though so we negate the pattern
    '!dist/mobile/deploy.json'
  ]);
});

gulp.task('default', ['clean:mobile']);