Question

我目前正在使用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

谢谢你，任何帮助都会非常感激！

Answer 1

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

Answer 2

事实证明这很简单。有一件事我做错了

我正在使用包括../includes/head而不是包括../includes/head（使用包含实际上为我工作的咕噜声，经过进一步的研究，我发现我使用它是错误的吞咽。）。

如何设置玉包括gulp-jade

2 个答案: