开始使用yeoman
yeoman其实就是个工作流，由3部分组成，yo, bower, grunt。
yo是一个脚手架工具，用于创建项目脚手架。
bower就是前端的依赖加载工具，类似于npm。
grunt是构建工具，类似于gulp。
第一步，安装yo,以及需要依赖的工具
npm install -g yo bower grunt-cli gulp
第二步，安装项目脚手架生成器
npm install -g generator-webapp
有很多开源的脚手架生成器供我们自由安装，类似与angular项目的话，我们可以安装generator-angular.
第三步，创建一个项目文件夹
md my-yo-porject
cd my-yo-project
第四步，运行项目
yo webapp
类似与angular项目的话，就执行yo angualr
在angular项目中，我们还可以单独构建其中某一部分，例如：
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService
bower是一个包管理器，能够让你更容易管理项目中的依赖，包括javascript,images,css 这个项目是有twitter维护的。
主要的命令有：
bower serch <dep>
bower install <dep>...<depN>
bower list //罗列出你的项目中已经安装的依赖包
bower update <dep> //更新某个依赖到最新版本
一个正常的开发流程命令如下：
yo webapp
bower search jquery-pjax
bower install jquery-pjax --save
如果项目中有用到requireJS,则执行：
grunt bower //这样会将bower的依赖项全部插入到requireJS的配置中
如果项目中没有用到requireJS，则执行：
grunt wiredep //这样会将依赖项目插入到index.html页面中
你选择的生成器有可能不会包括grunt task的bower和wiredep,因此，你可能需要手动安装这两项任务：
npm install grunt-bower-requirejs --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-bower-requirejs');
参考：https://github.com/yeoman/grunt-bower-requirejs
npm install grunt-bower-requirejs --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-bower-requirejs');
参考：https://github.com/stephenplusplus/grunt-wiredep
grunt简单命令：
grunt server //preview an app you have generated (with livereload)
grunt test //run the unit tests for an app
grunt //build an optimized, production-ready version of your app
总的来说，工作流程如下：
yo webapp
grunt server
grunt test
grunt
grunt使用说明：
项目根目录中需要两个文件：package.json和Gruntfile(文件名为Gruntfile.js或者Gruntfile.coffee)
package.json被npm用于存储项目的元数据，以便将项目发布为npm模块，可以在这个文件中列出项目依赖的grunt和
grunt插件，放置在devDependencies配置中。
Gruntfile用于配置或定义任务，并加载grunt插件的。
只需要一个简单的命令，就可以自动生成一个package.json文件：
npm init
package.json代码样例如下：
1 { 2 "name": "my-project-name", 3 "version": "0.1.0", 4 "devDependencies": { 5 "grunt": "~0.4.5", 6 "grunt-contrib-jshint": "~0.10.0", 7 "grunt-contrib-nodeunit": "~0.4.1", 8 "grunt-contrib-uglify": "~0.5.0" 9 } 10 }
向package.json中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令来安装模块，
安装完模块后会自动将其天道devDependencies配置段中。
Gruntfile由以下几部分构成：
- "wrapper" 函数
- 项目与任务配置
- 加载grunt插件和任务
- 自定义任务
一份简单的grunt文件如下：
1 module.exports = function(grunt) { 2 3 // Project configuration. 4 grunt.initConfig({ 5 pkg: grunt.file.readJSON('package.json'), 6 uglify: { 7 options: { 8 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */ ' 9 }, 10 build: { 11 src: 'src/<%= pkg.name %>.js', 12 dest: 'build/<%= pkg.name %>.min.js' 13 } 14 } 15 }); 16 17 // 加载包含 "uglify" 任务的插件。 18 grunt.loadNpmTasks('grunt-contrib-uglify'); 19 20 // 默认被执行的任务列表。 21 grunt.registerTask('default', ['uglify']); 22 23 };
需要特别注意的是第十行，build为子任务的名称，这个名称可以换位其他任意的字符串，但是不能缺少，一定要有，同时也可以在uglify内再多写几个子任务，在执行任务的时候，如果需要指定执行某个子任务，可以这样做：grunt.registerTask('default', ['uglify:build']);
只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：
grunt.loadNpmTasks('grunt-contrib-uglify');
使用grunt --help可以列出所有可用的任务。
自定义任务
通过定义 default 任务，可以让Grunt默认执行一个或多个任务。在下面的这个案例中，执行 grunt 命令时如果不指定一个任务的话，将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。
grunt.registerTask('default', ['uglify']);
如果Grunt插件中的任务（task）不能满足你的项目需求，你还可以在Gruntfile中自定义任务（task）。例如，在下面的 Gruntfile 中自定义了一个default 任务，并且他甚至不依赖任务配置：
1 module.exports = function(grunt) { 2 3 // A very basic default task. 4 grunt.registerTask('default', 'Log some stuff.', function() { 5 grunt.log.write('Logging some stuff...').ok(); 6 }); 7 8 };
特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks方法加载。
帮助工具：
1.sublime text sass预编译工具（转自http://www.w3cplus.com/sassguide/install.html）；
因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
然后直接在命令行中输入
gem install sass按回车键确认，等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。
如果要安装beta版本的，可以在命令行中输入
gem install sass --pre你还可以从sass的Git repository来安装，git的命令行为
git clone git://github.com/nex3/sass.git
cd sass
rake install升级sass版本的命令行为
gem update sass查看sass版本的命令行为
sass -v你也可以运行帮助命令行来查看你需要的命令
sass -h淘宝RubyGems镜像安装 sass
由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了，关于常用gem source命令可参看：常用的gem source
1 $ gem sources --remove https://rubygems.org/ 2 $ gem sources -a https://ruby.taobao.org/ 3 $ gem sources -l 4 *** CURRENT SOURCES *** 5 6 https://ruby.taobao.org 7 # 请确保只有 ruby.taobao.org 8 $ gem install sass
安装完成后，在sublime Text通过package install来安装sass builder来使用预编译功能。快捷键为ctrl + B;
2.autoPrefixer
这个sublime text插件可以帮助优化css代码，能够自动补全css3前缀；
改插件要求系统装有nodejs环境；
使用方式：
按Ctrl + Shift + P，然后选Autoprefix CSS或者设置键盘快捷键 – “Preferences > Key Bindings – User”
Preferences -> Key Bindings – User 新增
1 [ 2 { "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" } 3 ]