[ACCEPTED]-How to run a task ONLY on modified file with Gulp watch-gulp-watch

"gulp-changed" is not a best solution 3 for doing this, because it watch only modified 2 filed in "buildType" folder.

Try 1 gulp-cached instead.

Another option is to used the gulp.watch 1 on("change") option.

gulp
  .watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"])
  .on("change", function(file) {
      gulp
        .src(file.path)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
  });

No need for plugins, this can be achieved 2 with just gulp.watch.

With gulp.watch, you 1 can target the changed file like this.

gulp.watch(["src/**/*"], function (obj) {
 return gulp.src(obj.path, {"base": "src/"})
 .pipe(gulp.dest("dest"));
});

Edit: for Gulp v4.0.2 - Now fixed:

const { watch, src, dest } = require('gulp');

var watcher = watch(["src/**/*"]);
watcher.on('change', function(fileName){
    return src(fileName, {base: 'src/'})
        .pipe(dest('dest'));
});

Incremental builds are supported natively 3 in Gulp without any plugins since version 2 4.0. Here is the example taken from the 1 project README:

const paths = {
  ...
  images: {
    src: 'src/images/**/*.{jpg,jpeg,png}',
    dest: 'build/img/'
  }
}

function images() {
  return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
    .pipe(imagemin())
    .pipe(gulp.dest(paths.images.dest));
}

function watch() {
  gulp.watch(paths.images.src, images);
}

May I suggest gulp-newy in which you can manipulate 5 the path and filename in your own function. Then, just 4 use the function as the callback to the 3 newy(). This gives you complete control of the 2 files you would like to compare.

This will 1 allow 1:1 or many to 1 compares.

newy(function(projectDir, srcFile, absSrcFile) {
  // do whatever you want to here. 
  // construct your absolute path, change filename suffix, etc. 
  // then return /foo/bar/filename.suffix as the file to compare against
}

Yeah, gulp-changed does exactly that:

var changed = require('gulp-changed');

gulp.task('imagemin-cfg', function () {
return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
    .pipe(changed(buildType))
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest(buildType))
    .pipe(connect.reload());
});

0

Here's a real-world example I use all the 8 time to do this without the need for any 7 additional packages. I use this to minify, rename 6 and compile any .js file in the js directory. Compiled 5 files are saved to a dist directory with .min appended 4 before the extension.

// Compile JS
var compileJS = function( file ) {
    var currentDirectory = process.cwd() + '/';
    var modifiedFile = file.path.replace( currentDirectory, '' );

    gulp.src( modifiedFile )
        .pipe( uglify() )
        .pipe( rename( {
            suffix: ".min"
        } ) )
        .pipe( livereload() )
        .pipe( gulp.dest( 'dist' ) );
};

// Watch for changes
gulp.watch( 'js/*.js', [ 'js' ] ).on( "change", compileJS );

The above answers seemed 3 partially incomplete and a little unclear 2 to me, hopefully this is helpful for anyone 1 else looking for a basic example.

In the task or callback, you'll have an 4 event parameter, which has a type property, which 3 will tell you if the file was added, deleted 2 or changed. Best bet is to make use of that 1 in a conditional on your task.

gulp.watch('path to watch', function(event){
  if(event.type === 'changed') { 
    gulp.start('your:task');
  }
};

Define the main task so that it accepts 6 a parameter for the .src() input pattern. Define 5 a wrapper function to pass a default src 4 value for the task so that you can still 3 call it directly like gulp images:

const imageFilePattern = '/src/path/to/input';

function images() {
  getImagesTask(imageFilePattern);
}

function imagesTask(src) {
  return gulp.src(src)
    .pipe(imagemin())
    .pipe(gulp.dest('dest'));
}

Now you can easily 2 define the watch task to only process changed 1 files:

function watch() {
  return gulp.watch(imageFilePattern).on("change", imagesTask);
}