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

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

javascript - jQuery UI Splitter/Resizable for unlimited amount of columns -

javascript - IE9 error '$'is not defined -