使用Yeoman构建Web App工作流 (一)

  • 发布时间 2015-02-27
  • 分类 javascript

Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Yo,GruntBower为开发者创建一个易用Web应用的工作流。

2.Web应用开发流程

  1. 搭建目录结构文件夹 images,styles,scripts,vendor
  2. 编写HTML,可能你会用jade等模板引擎,那么需要编译成html
  3. 编写css,可能你需要SassLess等预处理来编写,那么需要编译成css,放入styles文件夹
  4. 编写javascript,可能你也需要用AtScriptTypeScriptCoffeeScript来编写,那么需要编译成js,放入scripts文件夹
  5. 有时候你还需要用到第3方的库,比如jQuery,你需要去jQuery官网下载jquery.js,并放入vendor文件夹
  6. 对js文件进行编码检查和单元测试
  7. 开发完毕后,你需要针对css,js进行压缩合并,已减少网站打开时的请求次数和文件大小
  8. 还需要对图片和SVG进行优化,减少文件大小

3.Yeoman可以做什么

Yo

帮你构建目录结构或者文件,解决开发流程中(1)

bower

第3方组件管理,解决开发流程中(5)

grunt

自动化构建工具,解决开发流程中(2,3,4,6,7,8)

自动化构建工具也可以使用Gulp

4.安装Yeoman

安装yeoman,grunt,bower,-g 安装在全局范围内,任何地方都能调用到相应命令

$ npm install -g yo bower grunt-cli gulp

安装 generator-webapp ,一个Web应用的脚手架构建程序,由HTML5 Boilerplate, jQuery, Modernizr, 和 Bootstrap构成

$ npm install -g generator-webapp

如果你想开发的是AngularJS的Web应用,你可以安装generator-angular构建程序,查看更多的构建程序

5.使用Yeoman创建目录结构

我的项目是Blog

$ mkdir /Users/Kittencup/WebServer/Blog
$ cd /Users/Kittencup/WebServer/Blog
$ yo webapp

根据需求选择上Bootstrap,Sass,Modernizr

安装完成后,Blog下生成的目录结构

6.目录结构

app

源文件的存放目录,未压缩的js,css,scss等

bower_components

使用bower安装的第3方组件的源代码,jquery,modernizr,bootstrap

node_modules

grunt 需要用到的工具模块安装目录

test

js 单元测试存放目录

.bowerrc

bower的配置目录,配置了使用bower安装的第3方组件存放目录

.editorconfig

帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格的配置,具体查看

.gitattributes

git属性设置,具体查看git文档

.gitignore

git提交时忽略的目录,如bowercomponents和nodemodules等目录并不需要提交给git

.jshintrc

jshint的配置文件,具体查看

.yo-rc.json

yo的配置文件

.bower.json

bower的配置文件,根据配置安装第3方组件到bower_components文件夹下

.Gruntfile.json

grunt的任务配置,根据任务配置自动化处理css,js等

.package.json

grunt的配置文件,根据配置安装grunt的依赖组件到node_modules文件夹下

7.开发项目时

在开发时,我们在app文件下进行开发,Grunt已经配置了开发任务

$ grunt serve

执行完命令后,创建tmp文件夹,存放经过编译后的scss文件,通过grunt-contrib-connect模拟服务器打开app/index.html,并且通过grunt-contrib-watch监听指定文件(html,css,js等),如果文件内容改变,则通过grunt-contrib-connect内的livereload功能通知浏览器,实现浏览器自动刷新

8.LiveReload

livereload功能需要配置浏览器上的扩展,Chrome-liveReload

安装完毕后,在浏览器右上方开启liveReload

开启图案

这样LiveReload功能才能正常使用

9.开发完毕时

开发完毕时,需要对开发的内容进行检测,测试,压缩合并等

$ grunt default

dist目录生成,经过压缩合并等的内容都在该目录下

10.下一章内容

下一章我将会讲解grunt的每个任务,GruntFile过于庞大,需要分解GruntFile文件,使每个任务独立,方便配置。