使用Jade功能改变了gulp?

时间:2016-11-08 11:23:23

标签: javascript node.js gulp pug

当我对.jade文件进行更改时,我希望Gulp任务仅针对该文件运行,而不是针对所有文件运行。为此我正在使用gulp-changed。它工作正常,直到我对影响全局布局的文件进行更改,例如_header.jade_layout.jade。当我对该文件进行更改时,没有任何反应。我的所有布局文件在标题之前都有_。我该如何解决这个问题?

这是我的gulpfile一些行

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'));
});

1 个答案:

答案 0 :(得分:1)

我要做的第一件事就是将你的玉编译任务重构成一个单独的函数。这允许您参数化您的玉器编译,以便您可以在您选择的一个或多个文件上运行它:

6:53:03 PM Gradle sync started

6:54:06 PM Gradle sync completed

6:54:10 PM Executing tasks: [:app:generateDebugSources, :app:mockableAndroidJar, :app:prepareDebugUnitTestDependencies, :app:generateDebugAndroidTestSources]

6:54:16 PM Gradle build finished in 9s 558ms

6:56:52 PM Executing tasks: [:app:clean, :app:generateDebugSources, :app:mockableAndroidJar, :app:prepareDebugUnitTestDependencies, :app:generateDebugAndroidTestSources, :app:assembleDebug]

6:58:31 PM Gradle build finished in 1m 39s 281ms

现有的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 })); } 任务现在只需调用该函数:

jade

如果更改的文件是部分文件(以gulp.task('jade', function() { return compileJade('dev/templates/**/!(_)*.jade'); }); 开头),我们需要能够确定哪些其他文件受到该更改的影响。 setup.py库促进了这一点:

_

最后,只要文件发生变化,我们只会为受影响的文件调用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; }) } 函数:

compileJade