CroaToa CroaToa - 29 days ago 15
Jade Question

Using Jade features with gulp-changed?

When I make changes to

.jade
files I want to
Gulp
task run only for that file, not for all files. For that I'm using
gulp-changed
. It's working fine, until I make changes to files that affect to global layout, eg
_header.jade
,
_layout.jade
. When I make changes to that files nothing happens. All my layout files have
_
before title. How can I solve this issue?

Here is my gulpfile some lines

gulp.task('jade', function() {
return gulp.src('dev/templates/**/!(_)*.jade')
.pipe(plumber({
errorHandler: onError
}))
.pipe(changed('public', {extension: '.html'}))
.pipe(jade({
pretty: true,
}))
.pipe(gulp.dest('public'))
.pipe(browserSync.reload({
stream: true
}));
});

gulp.task('watch', function() {
gulp.watch('dev/templates/**/*.jade', gulp.series('jade'));
});

Answer

First thing I would do is to refactor out your jade compilation task into a separate function. That allows you to parameterize your jade compilation so that you can run it on one or more files of your choice:

function compileJade(files) {
  return gulp.src(files, {base:'dev/templates'})
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(jade({
        pretty: true,
    }))
    .pipe(gulp.dest('public'))
    .pipe(browserSync.reload({
        stream: true
    }));
}

Your existing jade task now simply calls that function:

gulp.task('jade', function() {
  return compileJade('dev/templates/**/!(_)*.jade');
});

If a changed file is a partial (starts with _) we need to be able to determine which other files are affected by that change. This is facilitated by the jade-inheritance library:

var JadeInheritance = require('jade-inheritance');
var path = require('path');

function isPartial(file) {
  return path.basename(file).match(/^_.*/);
}

function findAffectedFiles(changedFile) {
  return new JadeInheritance(changedFile, 'dev/templates', {basedir: 'dev/templates'})
    .files
    .filter(function(file) { return !isPartial(file); })
    .map(function(file) { return 'dev/templates/' + file; })
}

Finally whenever a file changes we call the compileJade function for the affected files only:

gulp.task('watch', function() {
  gulp.watch('dev/templates/**/*.jade').on('change', function(changedFile) {
    return compileJade(isPartial(changedFile) ? findAffectedFiles(changedFile) : changedFile);
  });
});