javascript - 如何设置 jade 包含 gulp-jade

Question

我目前正在使用 gulp-jade，我正在努力研究如何在我的 gulpfile.js 中设置 Jade include。(为了澄清，我在这里指的是 http://jade-lang.com/reference/includes/)以下是我的 gulpfile.js 中的代码

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var uglify      = require('gulp-uglify');
var jade        = require('gulp-jade');
var jshint      = require('gulp-jshint');
var fileinclude = require('gulp-file-include');
var reload      = browserSync.reload;


//compile jade to html
gulp.task('templates', function() {

    var YOUR_LOCALS = {};

    gulp.src('./app/jade/*.jade')
        .pipe(jade({
            locals: YOUR_LOCALS
        }))
        .pipe(gulp.dest('./dist/'))
});

//reload files, once jade compilation happens

gulp.task('jade-watch', ['templates'], reload);


//Sass task for live injecting into all browsers

gulp.task('sass', function () {
    gulp.src('./app/scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./dist/css'))
        .pipe(reload({stream: true}));
});

//Separate task for the reaction to js files make change even without compilation and what not
gulp.task('compress', function() {
  return gulp.src('./app/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('js-watch', ['compress'], reload);

//Serve and watch the scss/jade files for changes

gulp.task('default', ['sass', 'templates', 'compress'], function () {

    browserSync({server: './dist'});

    gulp.watch('./app/**/*.jade', ['jade-watch']);
    gulp.watch('./app/scss/*.scss', ['sass']);
    gulp.watch('./app/js/*.js', ['js-watch']);

});

我知道要解析的内容很多。我希望这是一个标准的东西，不会花太长时间。如果您有兴趣查看整个文件结构，可以在我的 github 上查看 https://github.com/CharlieGreenman/Gulp-with-foundation-and-sass

谢谢，如有任何帮助，我们将不胜感激!

Answer 1

我写了一个 Gulp 插件，它允许您添加一些任意路径来解析包含和扩展到，从而简化您的包含，因此您不必太担心相对路径。看看:https://github.com/tomlagier/gulp-jade-modules