javascript - Using Jade features with gulp-changed? -
when make changes .jade
files want gulp
task run file, not files. i'm using gulp-changed
. it's working fine, until make changes files affect global layout, eg _header.jade
, _layout.jade
. when make changes files nothing happens. layout files have _
before title. how can solve issue?
here gulpfile 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')); });
first thing refactor out jade compilation task separate function. allows parameterize jade compilation can run on 1 or more files of 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 calls function:
gulp.task('jade', function() { return compilejade('dev/templates/**/!(_)*.jade'); });
if changed file partial (starts _
) need able determine other files affected change. facilitated 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 file changes call compilejade
function affected files only:
gulp.task('watch', function() { gulp.watch('dev/templates/**/*.jade').on('change', function(changedfile) { return compilejade(ispartial(changedfile) ? findaffectedfiles(changedfile) : changedfile); }); });
Comments
Post a Comment