yeoman框架gruntfile.js配置自动jade生成html
84324798 2014-09-12
说明：本文针对对yeoman框架有一定了解的朋友！
1：安装jade
1.1我们使用node的包管理器npm来安装jade
[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]
2.1创建jade任务
找到grunt.initConfig({})代码段，在后面添加
jade:{
compile:{
options:{
client:false,
pretty:true
},
files:[{
cwd:"<%=yeoman.app%>/views",
src:"*.jade",
dest:".tmp/views",
expand:true,
ext:".html"
}]
}
},
说明:cwd表示currentworkdirectory当前工作目录，在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"
}]
}
},
2.2修改grunt.registerTask
grunt.registerTask('serve','Compilethenstartaconnectwebserver',function(target){
if(target==='dist'){
returngrunt.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'
]);
2.3在watch中增加监视jade文件变化，实现更新
watch:{
jade:{
files:['<%=yeoman.app%>/{,*/}*.jade'],
tasks:['jade']
},
........
}
注意：这次和2.1不一样，这次是在watch内部，不是和2.1那样和watch同级！
2.4在copy:dist中增加下面这段
{
expand:true,
cwd:'.tmp',
dest:'<%=yeoman.dist%>',
src:['{,*/}*.html']
},
修改之后应该像这样
copy:{
dist:{
.....
{
expand:true,
cwd:'.tmp',
dest:'<%=yeoman.dist%>',
src:['{,*/}*.html']
},
............
这样，就能够在使用gruntforce或者gruntbuild的时候自动将jade变成html文件了，同时又能够时候更新！
