Get Gulp watch to perform function only on changed file

Question

I am new to Gulp and have the following Gulpfile

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

gulp.task('compress', function () {
    return gulp.src('js/*.js') // read all of the files that are in js with a .js extension
      .pipe(uglify()) // run uglify (for minification)
      .pipe(gulp.dest('dist/js')); // write to the dist/js file
});

// default gulp task
gulp.task('default', function () {

    // watch for JS changes
    gulp.watch('js/*.js', function () {
        gulp.run('compress');
    });

});

I would like to configure this to rename, minify and save only my changed file to the dist folder. What is the best way to do this?

possible duplicate of [How do I watch mutliple files with gulp-browserify but process only one?](http://stackoverflow.com/questions/21818188/how-do-i-watch-mutliple-files-with-gulp-browserify-but-process-only-one) — kamituel, Feb 16 '15 at 16:22

Leon Gaban · Answer 1 · 2015-02-16T16:43:27.590

13

This is how:

// Watch for file updates
gulp.task('watch', function () {
    livereload.listen();

    // Javascript change + prints log in console
    gulp.watch('js/*.js').on('change', function(file) {
        livereload.changed(file.path);
        gutil.log(gutil.colors.yellow('JS changed' + ' (' + file.path + ')'));
    });

    // SASS/CSS change + prints log in console
    // On SASS change, call and run task 'sass'
    gulp.watch('sass/*.scss', ['sass']).on('change', function(file) {
        livereload.changed(file.path);
        gutil.log(gutil.colors.yellow('CSS changed' + ' (' + file.path + ')'));
    });

});

Also great to use gulp-livereload with it, you need to install the Chrome plugin for it to work btw.

edited Feb 16 '15 at 16:43

answered Feb 16 '15 at 16:29

Leon Gaban

27,845
80
281
473

Is there a way to respect the glob? `file.path` returns the absolute path so `**` are not respected when it comes to `gulp.dest()`. – Markus May 26 '16 at 15:25
1

@Markus. look at `gulp-changed` – dgo Dec 20 '16 at 19:35

score 0 · Answer 2 · answered Dec 19 '19 at 10:45

0

See incremental builds on the Gulp docs.

You can filter out unchanged files between runs of a task using the gulp.src function's since option and gulp.lastRun

answered Dec 19 '19 at 10:45

James

329
2
9

Get Gulp watch to perform function only on changed file

2 Answers2