Question

我有一个简单的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＆gt;＆gt; /public/about/index.html

/src/templates/contact.jade＆gt;＆gt; /public/contact/index.html

/src/templates/features.jade＆gt;＆gt; /public/features/index.html

Answer 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之前加入/ **

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

Answer 3

我认为这是一些gulp欺骗和正确使用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。第二，我添加了一个＆＃39;！＆＃39; （感叹号）在你想要gulp忽略的文件之前。

3）Jade

你可以（并且应该）使用include / extend来告诉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

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

Answer 4

我不得不使用gulp-rename：

ScheduleAdapter

Jade to HTML＆gt;以jade文件

问题

实施例

4 个答案: