“gulp-jade”不工作或将 jade 编译为 html

Question

So I'm working on this project, and I'm using gulp. I need it to be able to compile the jade that I write (in the _jadefiles folder) and output them as .html into the _includes folder of my project.

The things I'm currently compiling and running with gulp are: - BrowserSync - Sass (Scss, technically.) - Autoprefixer - Something called Child Process (I started with a 'kit on github' called jekyll-gulp-sass-browser-sync ) - And Obviously Jade.

Note: I'm also using Jekyll, however, that hopefully shouldn't matter.

I'm following a video by DevTips, called Design+Code Hour 4.1

Here's his current code:

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var cp          = require('child_process');
var jade        = require('gulp-jade');

var messages = {
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};




/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
        .on('close', done);
});




/**
 * Rebuild Jekyll & do page reload
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
    browserSync.reload();
});




/**
 * Wait for jekyll-build, then launch the Server
 */
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
    browserSync({
        server: {
            baseDir: '_site'
        },
        notify: false
    });
});




/**
 * Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
 */
gulp.task('sass', function () {
    return gulp.src('assets/css/main.scss')
        .pipe(sass({
            includePaths: ['css'],
            onError: browserSync.notify
        }))
        .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulp.dest('_site/assets/css'))
        .pipe(browserSync.reload({stream:true}))
        .pipe(gulp.dest('assets/css'));
});

His jade gulp stuff:

/*
* I'm trying to gulp stuff, too. - 
*/

gulp.task('jade', function(){
  return gulp.src('_jadefiles/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('_includes'));
});


/**
 * Watch scss files for changes & recompile
 * Watch html/md files, run jekyll & reload BrowserSync
 */
gulp.task('watch', function () {
    gulp.watch('assets/css/**', ['sass']);
    gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']);
    gulp.watch('_jadefiles/*.jade', ['jade']);
});




/**
 * Default task, running just `gulp` will compile the sass,
 * compile the jekyll site, launch BrowserSync & watch files.
 */
gulp.task('default', ['browser-sync', 'watch']);

Everything else is working fine, exept this.

Answer 1

A bit late but hope it might help somebody who looks for a similar answer, I almost went crazy trying to figure out this for myself.

This sounds a little silly, but after having a similar problem (jade-gulp runs with no errors but not outputting index.html) and searching throughout the web for an answer with no luck, I realized I just had a syntax mistake in my .jade file (extra space character), so it would not compile to anything.

try commenting out the entire content of your .jade file and then try to parse a very simple line (eg h1 hello) with gulp-jade. check if it works, if it does, start debugging your code. Alternatively you can create a new .jade file with a simple code instead of commenting out the original file.

Hope it helps!

Answer 2

can you expand on any errors your seeing?

Does gulp jade run on its own - ie standalone - or is it just within your watch that it's not running?

My gut feeling is there's more likely to be an error in your jade markup ( or pug as we need to start calling it )

Can you post any of that ?