说明:本文针对对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表示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"
}]
}
},
2.2修改grunt.registerTask
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'
]);
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']
},
............
这样,就能够在使用grunt force或者grunt build的时候自动将jade变成html文件了,同时又能够时候更新!
分享到:
相关推荐
yeoman.github.io, Yeoman网站 Yeoman.io Yeoman.io 电子邮件站点 !如果你对 Yeoman.io 网站有问题或者贡献,那么这里就是 ! 如果你想提交有关文书代码或者工作流的问题,请访问文书/文书库管理单元。这个站点是用...
Yeoman 工程脚手架,可以生成基础微服务项目,CRUD 代码
generator-marionette, Yeoman marionette generator 发电机木偶AMD,Marionette和 Backbone的Yeoman生成器堆栈服务器:node: http://nodejs.org/Express: http://expressjs.com/套接字 IO: http:
这个想法是通过连接这些框架来解决常见问题,构建一个强大的框架来支持日常开发需求,并帮助开发人员在使用流行的 JavaScript 组件时使用更好的实践。 在你开始之前 在开始之前,我们建议您阅读有关组装 MEAN.JS ...
generator-nemo 是一个增加 Nemo 自动化解决方案到浏览器测试工具 Kraken 中的 Yeoman 生成器 标签:generator 分享 window._bd_share_config = { ...
用于启动 gulp 插件或带有 gulpfile.js 的基本 node.js 项目的 Yeoman 生成器。 使用全局安装: npm i -g generator-gulp 用法 $ yo gulp 其他有用的生成器 :任何项目的 Kickstart 文档! 这是 Verb 的官方 ...
一个自以为是的 Meteor.js 脚手架工具 Yeoman。 设置 在您使用它之前,您需要安装和 以下是撰写本文时的综合说明: # Meteor curl https://install.meteor.com | /bin/sh # Yeoman npm install -g yo # This ...
Yeoman.io 网站注意力! 如果您对Yeoman.io网站有任何疑问或贡献,这里就是这里! 如果要提交问题或为Yeoman的核心源代码做出贡献,请访问, 或。 对于工作流问题或贡献,请访问。贡献该站点由和。 开始: 1.克隆...
您可能想要涵盖的内容: Ruby版2.0.0 系统依赖NodeJS v0.10.x Yeoman、Bower、Grunt.js 配置bundle installcd ngappnpm install -g grunt-clinpm installbower installgrunt server 数据库创建数据库初始化如何运行...
generator-threejs 的生成器,它使用根据常见的最佳实践为项目构建基本的脚手架。 生成的项目包括重加载,当你开发掉毛本地服务器(见下面介绍如何运行的服务器部分)。 起始javascript与的用法指南。 可选包含 。...
科尔多瓦浏览器媒体 一般使用 在您的项目中,只需使用 Cordova CLI 直接从 github 安装插件... grunt --gruntfile=yeoman/Gruntfile.js build:development && cordova prepare browser 陷阱 我发现最新版本的插件 (0.2
生成器Scala.js Angular 生成器 该生成器基于神话般的Scala.js Angular示例: : 入门 确保已经安装了sbt ,如果不能简单地sbt的。 安装Yeoman发电机。 npm install -g generator-scalajs-angular 运行生成器以...
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
《Web前端自动化构建:Gulp、Bower和Yeoman开发指南》.pdf
发电机Symfony带来的好处入门特征一个基本的最新Symfony项目,具有收益(即将到来...) Ansible置备流浪文件.travis.yml要求使用此生成器需要几个依赖项: 节点,因为需要npm 以下节点软件包需要全局安装: npm ...
Node.js 库的 Yeoman 生成器 用法 安装generator-node-library npm install -g generator-node-library 为您的库创建一个新目录 mkdir my-lib 切换到新目录 cd my-lib 运行yo node-library yo node-library ...
发电机React的生成器。入门运行此版本的 yeoman 生成器。... 如果您想使用 Compass 框架,请确保您查看他们的文档以了解运行服务,并开始构建您的应用程序$ grunt serve 它将自动在您的 localhost:9000
yo - 用来运行Yeoman生成器的CLI工具
(N) Travis API密钥咕unt的包裹生成的文件夹和文件.editorconfig .gitattributes .jshintrc .travis.yml(可选) Gruntfile.js package.json 自述文件CHANGELOG.md 茉莉花节docs: src html pag