Question

我一直试图将网站从使用Jekyll切换到使用Gulp＆amp; Jade;它主要是使用Jekyll，因为它具有模板的便利性，但Jekyll的真正用途是作为一个博客，所以它的更多功能就是这样。在其中开发公司网站是有效的，但除非您使用开发服务器，否则watch之类的内容将丢失。它还具有使用Jade语法和npm的优势，但毫无疑问，Jekyll有Jade插件。

Jekyll最好指出的一点是，cannoical URL结构a.g.我们以前习惯使用路由动态网站（mydomain.com/about）的mod_rewrite可以通过目录结构轻松实现：./about/index.html

这确实意味着网站可以生成大量文件夹，因此转移到Jade我希望将其保持在最低限度。这是使用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

Answer 1

对于之前的项目，我使用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();
});

静态网站使用Gulp＆amp; Jade，cannonical URL

1 个答案: