gulp if one file changes, compile the rest

Question

I'm using gulp-watch to watch for changes and right now I have it ignore layout files. The problem is that whenever I update a layout file, I have to change some other file for it to compile. Is there any way using gulp-watch to watch everything and then compile a part of it? I saw this relevant link but it did not use gulp-watch.

Answer 1

I misread this question. I've left my original answer at the bottom for reference anyway.

---

You could use gulp-if.

 gulp.task('stream', function () {
    return gulp.src('dir/**/*.*')
        .pipe(watch('dir/**/*.*'))
        .pipe(gulpif(function (file) {
            return file.ext != ".layout"//your excluded extension
        }, processIfTrue()))
        .pipe(gulp.dest('build'));
});

---

That link does use gulp-watch. In fact, as I understand, that link explains exactly what you want to do.

The gulp-watch and whatever task you run on change take separate gulp.src instances.

You can, for example, use gulp.src('**/*.*') for your gulp.watch, and then gulp.src('**/*.less') for your compilation task.

Answer 2

You can set 2 separate watchers to run, and modifying each respective file listed below in src would trigger the respective task for that filename:

$ tree -I node_modules
.
├── gulpfile.js
├── package.json
└── src
    ├── layout-file-1.html
    ├── layout-file-2.html
    ├── other-file-1.html
    └── other-file-2.html

1 directory, 6 files

gulpfile.js - gulp.watch() function

var gulp = require('gulp')

// files with the word "layout" in them
var layoutFiles = 'src/**/*layout*';

// files without the word "layout" in them
var otherFiles = ['src/**/*', '!'+layoutFiles];

// these tasks will show as completed in console output
gulp.task('build-layout-files');
gulp.task('build-other-files');

gulp.task('watch', function(cb) {
   // watch only layoutFiles
   gulp.watch(layoutFiles, ['build-layout-files']) 

   // watch only otherFiles
   gulp.watch(otherFiles, ['build-other-files']) 
})

gulp.task('default', ['watch'])

gulpfile.js - gulp-watch module

var gulp = require('gulp')
var watch = require('gulp-watch')

// use print to debug watch processes
var print = require('gulp-print')

// files with the word "layout" in them
var layoutFiles = 'src/**/*layout*';

// files without the word "layout" in them
var otherFiles = ['src/**/*', '!'+layoutFiles];

gulp.task('watch:layout-files', function(cb) {
   watch(layoutFiles, function () {
      gulp.src(layoutFiles)
         .pipe(print(function(fileName) {
            return "Compiling Layout File: "+fileName;
         }))
         .pipe(gulp.dest('build/layout-files'))
   });
})

gulp.task('watch:other-files', function(cb) {
   watch(otherFiles, function () {
      gulp.src(otherFiles)
         .pipe(print(function(fileName) {
            return "Compiling Other File: "+fileName;
         }))
         .pipe(gulp.dest('build/other-files'))
   });
})

gulp.task('default', ['watch:layout-files', 'watch:other-files'])