Grunt
JavaScript 任务运行器F5
Ctrl+F5
MIN-精简
css / js / image / html
REPEAT FOREVER
DON'T REPEAT YOURSELF!
AUTOMATION
前端自动化---集成解决方案
实时刷新，管理依赖，自动化测试，压缩打包，编译部署...
Yeoman
为现代Web应用而生的现代工作流
Yo[脚手架工具], Grunt[构建工具-自动化任务管理工具], Bower[依赖包管理工具]
Git/GitHub for windows
Git是一个免费的、分布式的版本控制工具，或是一个强调了速度快的源代码管理工具。
GitHub是一个基于git的代码托管平台，付费用户可以建私人仓库，免费用户只能使用公共仓库。
注意：Run Git from the Windows Command Prompt
Windows/system32/cmd.exe
C:\Users\Administrator>node -v
v0.10.35
C:\Users\Administrator>npm -v
1.4.28
安装Grunt
npm uninstall -g grunt
grunt从版本0.3.X到0.4.x，变化比较大,如果之前安装了0.3.x版本，需先进行卸载
npm install -g grunt-cli
grunt-cli的主要作用是让我们可以运行Grunt命令，加上-g，则可以在任意目录下运行
Grunt配置文件
1.package.json
用于保存项目元数据,运行 npm install 就会为文件中所列出的每个依赖安装对应的版本。
D:\GruntJs>npm init --初始化package.json
2.Gruntfile.js
3种官方维护方式，用于配置或定义任务以及加载 Grunt 插件。
git clone git://github.com/gruntjs/grunt-init-gruntfile.git $HOME/.grunt-init/
git clone git://github.com/gruntjs/grunt-init-jquery.git $HOME/.grunt-init/
git clone git://github.com/gruntjs/grunt-init-node.git $HOME/.grunt-init/
Creating plugins
1. npm install -g grunt-init
2. git clone git://github.com/gruntjs/grunt-init-gruntplugin.git
3. grunt-init gruntplugin
4. npm install
5. Author your plugin.
6. npm publish
package.json规范
https://www.npmjs.org/doc/json.html
http://mujiang.info/translation/npmjs/files/package.json.html
Gruntfile.js
D:\GruntJs>grunt
Fatal error: Unable to find Gruntfile.
command: npm install -g grunt-init
command: git clone git://github.com/gruntjs/grunt-init-gruntfile.git
command: grunt-init grunt-init-gruntfile
D:\GruntJs>npm install grunt --save-dev
D:\GruntJs>grunt --version
Gruntfile配置文件：
1.包装函数
2.项目与任务的配置
3.加载 Grunt 插件和任务
4.默认/自定义任务
1.包装函数：
module.exports = function(grunt) {
// 处理 Grunt
};
module.exports指向调用该模块时将返回的对象,然后以grunt对象为参数执行该模块返回的函数。
2.项目与任务的配置：
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
//任务配置
}
});
grunt.initConfig方法接受一个Plain Object做为参数，该对象的每个属性名代表一个顶层task名字，而值则是具体的配置。
3.加载 Grunt 插件和任务：
grunt.loadNpmTasks负责载入npm模块定义的任务.
// 加载提供 "uglify" 任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
4.默认/自定义任务：
grunt.registerTask用来注册新的任务,taskList数组中的任务将被顺序执行.
//default tasks
grunt.registerTask('default', ['uglify']);
//user-defined tasks
grunt.registerTask('buildcss', ['cssmin','copy','prd']);
安装插件：
D:\GruntJs>npm install
D:\GruntJs>npm install grunt-contrib-uglify --save-dev
D:\GruntJs>npm install grunt-contrib-cssmin --save-dev
......
matchdep-自动载入所有任务
D:\github\GruntJs>npm install matchdep --save-dev
D:\github\GruntJs>npm install load-grunt-tasks --save-dev
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-uglify');
Grunt plugins/configure
https://github.com/gruntjs/grunt-contrib/
http://gruntjs.com/configuring-tasks
注意：文件格式配置方式
livereload/watch
D:\GruntJs>npm install connect-livereload --save-dev
D:\GruntJs>npm install grunt-contrib-livereload --save-dev
D:\GruntJs>npm install grunt-contrib-watch --save-dev
The static server：
D:\GruntJs>grunt live
LiveReload:http://localhost:35729/
轻量级的重加载服务组件:tiny-lr
connect静态服务器：
Reference article
Other Build Tool
Grunt tasks
uglify cssMin clean concat cssLint copy htmlMin imageMin htmlHint less compress cssc connect include-replace qunit Less Sass liveReload watch BrowserSync requireJs jsHint jasmine
......
Yeoman
npm install -g yo
Yo项目初始化工具，生成启动某类项目必须的项目文件。
npm install -g generator-webapp
安装generator，一个用于创建某个指定类型项目的生成器。
yo webapp
generator-generator
npm install -g yo generator-generato
yo generator
Bower
npm install -g bower
针对前端的包管理工具，直接从GitHub查找需要的库下载到本地缓存,可以指定版本号并且可以重命名。
bower install jQuery
bower install jQuery#1.11.1
bower.json
通过bower.json文件来配置需要安装的包
bower init
bower_components配置,修改.bowerrc:{"directory": "lib"}
JAVA---MAVEN
- 1. nginx_concat_module
- 2. Web Resource Optimizer for Java - wro4j
- 3. yuicompressor-maven-plugin/maven-replacer-plugin
- 4. ngx_http_concat_module
参考资料
基于Node.js的自动化构建工具GruntJS
构建自动化的前端开发流程
前端集成解决方案