yeoman框架gruntfile.js配置自动jade生成html

[b][size=large]说明：本文针对对yeoman框架有一定了解的朋友！[/size][/b]

[size=small][b]1：安装jade[/b][/size]

[b][size=x-small]1.1我们使用node的包管理器npm来安装jade[/size][/b]

[size=x-small][b]

   npm install jade -g #-g为全局安装

1.2进入我们yeoman生成目录[/b][/size]

    npm install grunt-contrib-jade --save-dev

安装grunt-contrib-jade插件，为grunt从jade生成html提供支持。
[size=small]

2：配置gruntfile.js文件

[/size]

[size=x-small][b]2.1创建jade任务[/b][/size]

找到grunt.initConfig({})代码段，在后面添加
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [{
cwd: "<%= yeoman.app %>/views",
src: "*.jade",
dest: ".tmp/views",
expand: true,
ext: ".html"
}]
}
},
说明:cwd表示current work directory 当前工作目录，在yeoman中指的就是你的app文件夹，因为html默认是在views中，所以我加上了views。
src:代表你的源文件目录和类型
dest:代表你想要生成的文件存放位置
如果你不想这么麻烦，不管哪里有jade你都想生成，你只需这样
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [{
cwd: "<%= yeoman.app %>",
src: "*.jade",
dest: ".tmp",
expand: true,
ext: ".html"
}]
}
},
[size=x-small][b]2.2修改grunt.registerTask[/b][/size]

grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}

grunt.task.run([
'clean:server',
'wiredep',
'jade',#在这里添加上jade，修改之前是没有的！
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});


grunt.registerTask('build', [
'clean:dist',
'wiredep',
'jade',#这里同样需要加上jade，注意，应该放在clean:disk之后
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
[size=x-small][b]2.3在watch中增加监视jade文件变化，实现更新[/b][/size]

watch: {
jade: {
files: ['<%= yeoman.app %>/{,*/}*.jade'],
tasks: ['jade']
},
........
}
注意：这次和2.1不一样，这次是在watch内部，不是和2.1那样和watch同级！
[size=x-small][b]2.4在copy:dist中增加下面这段[/b][/size]

{
expand: true,
cwd: '.tmp',
dest: '<%= yeoman.dist %>',
src: ['{,*/}*.html']
},
修改之后应该像这样
copy: {
dist: {
.....
{
expand: true,
cwd: '.tmp',
dest: '<%= yeoman.dist %>',
src: ['{,*/}*.html']
},
............

这样，就能够在使用grunt force或者grunt build的时候自动将jade变成html文件了，同时又能够时候更新！