Launch Gulp Watch for JS and detect current folder has changed

Question

I need to minimize the number of gulp's command from my gulpfile.

This is my JS folders

js/
   templates/
              t-01/
              t-02/
              [...]
              t-xxx/

My gulp task for JS (with livereload)

gulp.task('da-js', function() {
    gulp.src([
        'js/templates/**/*.js',
        '!js/templates/**/*.min.js'
        ])
        .pipe(concat('app.min.js'))
        .pipe(gulp.dest('js/templates'))
        .pipe(livereload());
});

This task is global the destination folder is templates but I want to detect the current folder of js files like is :

I'm changing js in /templates/t-01/
gulp.watch is launching
app.min.js is generating only in this folder t-01

I know the gulp.dest is not correct to target current folder but I don't know how to do this.

Thank you for your help :)

Are you monitor all files under `templates` folder for updates so that any change in any JS file under this folder should generate your `app.min.js` again ? — Arkantos, Dec 10 '15 at 15:34

score 0 · Answer 1 · answered Dec 10 '15 at 15:39

You can use gulp's watch method to monitor a folder with JS files for updates and run a series of tasks in response to some change.

gulp.task('watch-files', function() {
    gulp.watch('js/templates/**/*.js', ['da-js']);
});

Here we're watching over all the JS files in templates and all it's sub-folders and running your file concatenation task (da-js) for every update. Now that we're executing the same task, your app.min.js folder will be generated in your templates folder even when you change templates/t-01/some.js.

With the watch-files task defined in your gulpfile.js, you can simply run gulp watch-files command which will start monitoring your files.

Launch Gulp Watch for JS and detect current folder has changed

1 Answers1