2014-10-03 17 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(); 
});