gulp编译jade后怎么能按目录的生成相应目录的html?

MiIIer
  • 194

比如gulp编译/jade/main/index.jade,能生成在html/main/index.html。 以下是我写的gulp的配置,它不能按目录生成html,只能统一生成在/src/目录下,求大神帮忙了!
现在的配置如下:

$gulp.task('html', function () {
    return $gulp.src([
        '!share/jade/compoments/_*.jade',//不编译组件文件
        'share/jade/**/*.jade'//编译页面文件
    ]).pipe($jade({
        pretty: '\t'
    })).pipe($gulp.dest('var/build'));//输出到var/build文件夹下
});

我的jade目录如下:

jade>
    compoments>
        _header.jade
        _sidebar.jade
    pages>
        cartoon>
            huoying.jade
        movie>
            superman.jade
        music>
            taylor.jade
        main>
            index.jade
            about.jade
        

有好的解决办法吗!

回复
阅读 2.8k
1 个回答

首先,你的gulp写法还存在点问题,gulp.src()参数如果是数组,!表示排除模式,但是不能在数组中的第一个元素中使用排除模式。那样是不生效的。比如:

gulp.src([*.js,'!b*.js']) //匹配所有js文件,但排除掉以b开头的js文件
gulp.src(['!b*.js',*.js]) //不会排除任何文件,因为排除模式不能出现在数组的第一个元素中

建议看一下我的这篇文章:http://jafeney.com/2016/03/06/20160306-gulp/,这里详细地介绍了gulp的用法

还有建议这样写gulp任务:


var gulp = require('gulp'),                         // gulp核心模块
    DEST = 'public',                                // 编译目录
    CSS_DEST = 'public/css',                        // css编译目录
    JS_DEST = 'public/js',                          // js编译目录
    IMG_DEST = 'public/img',                        // img编译目录
    HTML_DEST = 'var/build',                        // html编译目录
    WEB_PORT = 9000,                                // 服务器监听的端口
    $ = require('gulp-load-plugins')();             // gulp插件加载模块

// .... 其他代码省略掉了


// ---- 这里是你要的: 处理html ------
gulp.task('htmls', function() {
    return gulp.src(['share/jade/**/*.jade','!share/jade/compoments/_*.jade'])
        .pipe($.jade({pretty: '\t'}))
        // 压缩html (不要这个功能的话可以去掉)
        .pipe($.rename({
            suffix: '.min',
            extname: '.html'
        }))
        .pipe($.minifyHtml())
        .pipe(gulp.dest(HTML_DEST))
});

如果还有疑问,发我邮件 692270687@qq.com

宣传栏