Jade to HTML> index.html以jade文件命名的目录 [英] Jade to HTML > index.html inside directory named after jade file

问题描述

我有一个简单的gulp任务，它将 .jade 文件编译为 .html 文件：

  var gulp = require（'gulp'），
 jade = require（'gulp-jade'）; 
 
 gulp.task（'jade'，function（）{
 return gulp.src（'src / templates / ** / *。jade'）
 .pipe（jade （））//点到玉插件
.pipe（gulp.dest（'public'））; //告诉我们输出文件夹
}）; 
  

问题

/src/templates/page.jade 在目标 /public/page.html

中编译为HTML

我如何得到它，因此它会编译 /src/templates/page.jade 到 / public / page / index .html 。

即，在 templates 中的每个新的jade文件都被编译成一个名为 index.html 的html文件，这个文件具有相同的名称作为源jade文件？

示例

/ src / templates / about。 jade >> /public/about/index.html

/src/templates/contact.jade >> /public/contact/index.html

/src/templates/features.jade >> /public/features/index.html

解决方案

如果您想包含子目录，您可以使用：

  .pipe（重命名（函数（路径）{
 if（path.basename！='index'）
 {
 var crumbs =路径。 dirname.split（'/'）
 crumbs.push（path.basename）
 
 path.basename ='index'
 path.extname ='.html'
 
 path.dirname = crumbs.join（'/ '）
} 
 
返回路径
}））
  

我一直在前台解决方案上取得成功。不要忘记在gulp.src中包含/ ** /*.filetype。

I've got a simple gulp task that compiles a .jade file to an .html file:

var gulp = require('gulp'),
    jade = require('gulp-jade');

gulp.task('jade', function() {
  return gulp.src('src/templates/**/*.jade')
    .pipe(jade()) // pip to jade plugin
    .pipe(gulp.dest('public')); // tell gulp our output folder
});

Issue

/src/templates/page.jade is compiled to HTML at the destination /public/page.html

How would I get it so it would compile /src/templates/page.jade to /public/page/index.html.

I.e. every new jade file in templates gets compiled to a an html file called index.html inside a directory with the same name as the source jade file?

Examples

/src/templates/about.jade >> /public/about/index.html

/src/templates/contact.jade >> /public/contact/index.html

/src/templates/features.jade >> /public/features/index.html

解决方案

If you want to include sub-directories you can go with:

    .pipe(rename(function(path){             
         if(path.basename != 'index')
         {
            var crumbs = path.dirname.split('/')
            crumbs.push(path.basename)

            path.basename = 'index'
            path.extname = '.html'

            path.dirname = crumbs.join('/')
        }

        return path
    }))

I've been using this with success on a front-matter solution. Don't forget to include /** before /*.filetype in the gulp.src

这篇关于Jade to HTML> index.html以jade文件命名的目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！