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. :(
2 Answers
Reset to default 3Use 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']);