如何使用 gulp-jade 设置翡翠答案

【问题标题】：How to setup jade includes with gulp-jade如何使用 gulp-jade 设置翡翠
【发布时间】：2016-01-15 12:27:06
【问题描述】：

我目前正在使用 gulp-jade，我正在努力在我的 gulpfile.js 中设置 Jade 包含。（为了澄清，我在这里指的是 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

谢谢你，任何帮助都将不胜感激！

【问题讨论】：

标签： javascript node.js gulp

【解决方案1】：

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

【讨论】：

喜欢这个主意。作为记录，我已经转而只使用 node/npm 而不使用 gulp 或 grunt。从那以后我就再也没有回头:)

【解决方案2】：

原来它真的很简单。我做错了一件事

我使用的是 include ../includes/head 而不是 include ../includes/head（在 grunt 中使用 include 实际上对我有用，经过进一步研究，我发现我在 gulp 中错误地使用了它。

【讨论】：