Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing gulp.src files after gulp.dest?

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. :(

like image 387
XåpplI'-I0llwlg'I - Avatar asked May 30 '14 10:05

XåpplI'-I0llwlg'I -


Video Answer


1 Answers

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 completed.


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('compile-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 complete. That way, the files will only be deleted once your less compilation 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.

like image 189
soenguy Avatar answered Sep 20 '22 06:09

soenguy