gulp-jade only builds one HTML file when there are multiple jade files in source folder

Question

I'm having issues with my Gulpfile, and I can't seem to narrow down the issue.

I have a my Gulpfile setup like so:

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    jade = require('gulp-jade'),
    stylus = require('gulp-stylus'),
    minify = require('gulp-minify'),
    coffee = require('gulp-coffee'),
    autoprefixer = require('gulp-autoprefixer'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    del = require('del'),
    browserSync = require('browser-sync').create();

gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'markup', 'views', 'scripts', 'controllers', 'images', 'watch', 'serve');
});

gulp.task('serve', function() {
    browserSync.init({
        server: './public'
    });
    gulp.watch('public/stylesheets/*.css').on('change', browserSync.reload);
    gulp.watch('public/js/*.js').on('change', browserSync.reload);
    gulp.watch('public/js/*/*.js').on('change', browserSync.reload);
    gulp.watch('public/*.html').on('change', browserSync.reload);
    gulp.watch('public/*/*.html').on('change', browserSync.reload);
});

gulp.task('watch', function() {
    gulp.watch('src/js/*.coffee', ['scripts']);
    gulp.watch('src/js/*/*.coffee', ['controllers']);
    gulp.watch('src/*/*.jade', ['views']);
    gulp.watch('src/*.jade', ['markup']);
    gulp.watch('src/stylesheets/*.styl', ['styles']);
    gulp.watch('src/images/*', ['images']);
});

gulp.task('markup', function() {
    gulp.src('src/*.jade')
        .pipe(jade())
        .pipe(minify())
        .pipe(gulp.dest('public'))
        .pipe(browserSync.stream());
});

gulp.task('views', function() {
  var YOUR_LOCALS = {};
  gulp.src('src/views/*.jade')
      .pipe(jade({
        locals: YOUR_LOCALS
      }))
      .pipe(minify())
      .pipe(gulp.dest('public/views'))
      .pipe(browserSync.stream());
});

gulp.task('styles', function() {
    gulp.src('src/stylesheets/*.styl')
        .pipe(stylus())
        .pipe(autoprefixer())
        .pipe(minify())
        .pipe(gulp.dest('public/stylesheets'))
        .pipe(browserSync.stream());
});

gulp.task('scripts', function() {
    gulp.src('src/js/*.coffee')
        .pipe(coffee())
        .pipe(minify())
        .pipe(gulp.dest('public/js'))
        .pipe(browserSync.stream());

});

gulp.task('controllers', function() {
  gulp.src('src/js/controllers/*.coffee')
      .pipe(coffee())
      .pipe(minify())
      .pipe(gulp.dest('public/js/controllers'))
      .pipe(browserSync.stream())
});

gulp.task('images', function() {
    gulp.src('src/images/*')
        .pipe(cache(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('public/images'))
        .pipe(browserSync.stream());
});

gulp.task('clean', function() {
    return del(['public/js', 'public/stylesheets', 'index.html'])
});

And a src/views folder, like so:

src
  └── views
      ├── login.jade
      ├── register.jade
      └── success.jade

However, when I run I run my Gulpfile, it only builds the first jade file (login.jade) into HTML, like so:

public
     └── views
     └── login.html

How can I get it to build the rest of these files?

If I remove the login.jade file from the source directory, and run gulp, it will build the next file in line, which is register.jade. Also, I don't have this issue with my coffee script files...

Answer 1

try changing:

gulp.watch('src/*/*.jade', ['views']); gulp.watch('src/*.jade', ['markup']);

to

gulp.watch('src/**/*.jade, ['views']); gulp.watch('src/**/*.jade', ['markup']);