Grunt 认识_html/css_WEB-ITnose

基本工作流：

JS合并、JS压缩、CSS压缩、CSS Sprite、图片优化、测试、静态资源缓存（版本更新）...

基于工作流产生的工具：

JSHint（jshint.com）、CSSLint（csslint.net）、jade（jade.tilab.com）、coffeeScript（coffee-script.org/）、requireJs/seaJs、compass/less/sass ...

Grunt就是解决各种工具组合而形成系统工作流的解决方案

安装

nodeJs --> npm --> grunt --> package.json --> 安装插件Grunt相关插件 --> Gruntfile.js

nodeJs : 可使用homeBrew安装，也可以官网安装 brew install node(附带npm)

grunt : npm install -g grunt-cli(卸载：npm uninstall grunt)

package.json : 用于nodeJs包管理（比如grunt插件安装管理） npm init 开始填写项目名称、版本号、git信息、作者等信息

安装grunt相关插件 : 合并文件(grunt-contrib-contact)、语法检查(grunt-contrib-jshint)、Sass编译(grunt-contrib-sass)、压缩js文件(grunt-contrib-uglify)、监听文件变化(grunt-contrib-watch)、建立本地服务器(grunt-contrib-connect)

安装grunt到项目命令 : npm install grunt --save-dev(npm install grunt表示安装到当前项目，--save-dev表示安装grunt信息添加至package.json中，在package.json显示为"devDenpendencies" : {"grunt" : "^1.0.0"}表示当前项目依赖grunt，版本为1.0.0)

安装grunt相关插件到项目命令 : npm install --save-dev grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect表示把相关插件到项目中，一个插件对应一个任务

配置

Gruntfile.js : 配置Gruntfile.js，写入任务

任务：Mulit Tasks( grunt.initConfig({key : value})  ) 和 Baisc Tasks

配置Gruntfile.js语法 : 所有的代码包裹在 module.exports = function (grunt) { ... };里面的代码主要分为：任务配置（也可不必要，比如Baisc Tasks）、插件加载、任务注册。实现：用grunt注册一个任务从而更具根据任务配置调用加载的插件来执行相应的操作

Mulit Tasks : 有所谓的target 且每个Mulit Task都必须有一个task 如 : grunt.initConfig({concat : {foo : { ... }, bar : { ... }}, uglify : {bar : {}}})  concat任务有foo和bar两个target,而uglify只有一个target，target名字可以更换（但是任务的名称是固定的，比如concat对应相关的插件），现在运行grunt concat:foo或grunt concat:bar分别表示运行foo或bar指定的的concat任务 只运行grunt concat将会遍历concat的targets按顺序运行

Baisc Tasks : 直接注册任务 grunt.register(taskName,taskFunction) 如 : grunt.register("foo", function (arg1, arg2) { ... }) 运行grunt foo 或者 grunt foo:a:b a和b是传递给foo的参数

任务配置 : 调用插件配置要执行的任务和实现的功能

Baisc Tasks : 不需要任务配置

插件加载 : 加载所需的插件 grunt.loadNpmTasks()

任务注册 : 注册一个任务，包含之前的任务配置代码 grunt.registerTasks()