2014-10-03 16 views
1

我一直在尝试将网站从使用Jekyll切换到使用Gulp & Jade;它主要是使用Jekyll,因为它的模板很方便,但是Jekyll真正的用途是作为博客,所以更多的功能就是这样。其中开发公司网站的作品,但watch丢失,除非你使用开发服务器。它还具有使用Jade语法的优势,并且无疑存在用于Jekyll的Jade插件的npm使用Gulp&Jade,cannonical URL的静态网址

Jekyll有一点要指出的是,canonical URL结构a.g. mydomain.com/about,我们已经习惯了与动态路由使用的网站(例如用mod_rewrite)可以很容易地用目录结构来实现的:./about/index.html

这并不意味着网站可以产生大量的文件夹,所以搬到玉我想保持在最低限度。这是代码使用gulp jade产生.html.jade文件:

gulp.task('jade',function(callback){ 
    gulp.src('./jade/*.jade') 
    .pipe(jade({ 
     pretty: true, 
     markdown:marked 
    })) 
    .pipe(gulp.dest('./public/')); 

    callback(); 
}); 

我怎样才能改变这种获得:

jade/index.jade -> public/index.html 
jade/about.jade -> public/about/index.html 
jade/another-page.jade -> public/another/page/index.html 

回答

4

对于以前的项目我已经使用了gulp-rename库允许快速将配置文件切换到构建目录。原来,它不仅仅是更多的正则表达式并传递函数为它为用户提供一个有用的对象

path={ 
    basename:'about', 
    dirname:'', 
    extname:'html' 
} 

改变这些值改变重命名,不需要return值。因此,通过快速检查主要index.jade文件,我们可以快速拆分并加入以形成一个目录路径,如果它不存在,gulp.dest将为我们创建。

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

    callback(); 
});