gulp-jade只在源文件夹中有多个jade文件时构建一个HTML文件

时间:2016-05-03 23:18:28

标签: javascript gulp pug

我的Gulpfile存在问题,而我似乎无法缩小问题的范围。

我有一个像我这样的Gulpfile设置:

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'])
});

和src / views文件夹一样:

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

然而,当我运行我运行我的Gulpfile时,它只将第一个jade文件(login.jade)构建为HTML,如下所示:

public
     └── views
     └── login.html

如何让它构建其余的这些文件?

如果我从源目录中删除login.jade文件并运行gulp,它将构建下一个文件,即register.jade。另外,我的咖啡脚本文件没有这个问题...

1 个答案:

答案 0 :(得分:1)

尝试改变:

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

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