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

说明:本文针对对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文件了,同时又能够时候更新!

相关推荐