Detect what file change with gulp

Question

I have this gulpfile:

  var gulp = require('gulp'),
      concat = require('gulp-concat'),
      uglify = require('gulp-uglify');

  gulp.task('minifyJS', function() {
    return gulp.src(['src/*.js'])
      .pipe(uglify())
      .pipe(gulp.dest('min'));
  });

  gulp.task('watch', function() {
    gulp.watch(['src/*.js'], ['minifyJS']);
  });

I want to know what file trigger the watcher and his absolute path.

For example: if my project is placed in /myCode and I change the file src/main.js, I want to see /myCode/src/main.js inside minifyJS task. Is there a way to do it?

Thank you for your time.

Answer 1

You can do it by using gulp-ng-annotate and gulp-changed:

var gulp = require('gulp');
var changed = require('gulp-changed');
var rename = require('gulp-rename');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example
var SRC = 'src/*.js';
var DEST = 'src/';

//Function to get the path from the file name
function createPath(file) {
    var stringArray = file.split('/');
    var path = '';
    var name = stringArray[1].split('.');
    stringArray = name[0].split(/(?=[A-Z])/);
    if (stringArray.length>1) {stringArray.pop()};
    return {folder: stringArray[0], name: name[0]}
}


gulp.task('default', function () {
    return gulp.src(SRC)
        .pipe(changed(DEST))
        // ngAnnotate will only get the files that
        // changed since the last time it was run
        .pipe(ngAnnotate())
        .pipe(rename(function (path) {
            var createdPath = createPath(path);
            path.dirname = createdPath.folder;
            path.basename: createdPath.name,
            path.prefix: "",
            path.suffix: "",
            path.extname: ".min.js"
         }))
        .pipe(gulp.dest(DEST));
});

Result: