Jade to HTML > index.html 里面以jade文件命名的目录答案

【问题标题】：Jade to HTML > index.html inside directory named after jade fileJade to HTML > index.html 里面以jade文件命名的目录
【发布时间】：2015-11-16 10:17:29
【问题描述】：

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

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

问题

/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

【问题讨论】：

标签： javascript node.js gulp pug

【解决方案1】：

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

    .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
    }))

我一直在成功地使用它作为前端解决方案。不要忘记在 gulp.src 中的 /*.filetype 之前包含 /**

【讨论】：

【解决方案2】：

我认为你需要的是gulp-rename 插件。玩转下面的代码，或许能解决你的问题。

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

gulp.task('jade', function() {
  return gulp.src('src/templates/**/*.jade')
    .pipe(jade())
    .pipe(rename(function(path) {
        var filename = path.basename;
        path.basename = 'index';
        path.extname = '.html';
        path.dirname = filename;
        return path;
    }))
    .pipe(gulp.dest('public'));
});

【讨论】：

【解决方案3】：

我认为这是结合了一些技巧和正确使用 Jade 本身。

以下内容对我有用，并且 index.html 的结果包括所有其他文件：

1) 项目结构：

- src
-- templates
--- footer.jade
--- layout.jade
-- index.jade

2) gulpfile：

var gulp = require('gulp'),
jade = require('gulp-jade');
gulp.task('jade', function() {
  return gulp.src(['!src/templates/**/*.jade', 'src/index.jade'])
    .pipe(jade()) 
    .pipe(gulp.dest('public')); 
});

请注意，我已更改 src 输入。首先，源文件作为数组传递给 gulp。第二，我添加了一个“！” （感叹号）在您希望 gulp 忽略的文件之前。

3) 玉

您可以（并且应该）使用包含/扩展来告诉jade最终如何组装您的页面。例如，这是我的文件包含的内容：

src/templates/footer.jade

h1
   some text

src/templates/layout.jade

doctype html
html
  head
    block title
      title Default title
  body
    block content

src/index.jade

extends ./templates/layout.jade

block title
  title Article Title

block content
  h1 My Article

  include ./templates/footer.jade

希望这会有所帮助。我也在学习这个:)

【讨论】：

【解决方案4】：

我不得不使用 gulp-rename：

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

gulp.task('jade', function() {
  return gulp.src('src/views/**/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(rename(function(path){
        if (path.basename=='index'){
          return;
        }
        path.dirname=path.basename.split('-').join('/');
        path.basename="index";
    }))
    .pipe(gulp.dest('./public/'))
    callback();
});

【讨论】：