Jade to HTML > index.html inside directory named a

问题:

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

回答1:

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

回答2:

I think what you need is gulp-rename plugin. Play around the following code, maybe it will solve your problem.

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:

I think it's a combination of some gulp trickery and proper usage of Jade itself.

the following works for me, and results with index.html including all other files:

1) Project Structure:

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

Notice i've changed the src input. first, the source files are passed to gulp as an array. second, i've added an '!' (exclamation mark) before the files you want gulp to ignore.

3) Jade

you can (and should) use include/extend to tell jade how to assemble your page eventually. for example, this is what my files include:

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

Hope this helps. I'm just learning this too :)

回答4:

I had to use 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();
});