打包的目的和意义就不用叙述了直接上干货

 

　　里面的教程也太简单了，需要下一番功夫去研究才行。本文将grunt打包的常用方法都用实例描述，更加清晰易懂。

 

　　1)需要安装nodejs：

 

　　本人的nodejs工程目录为F:\chuaNodejs（后续所有相对路径都是相对于这个目录）

 

　　2)命令行到nodejs目录（需要系统管理员权限，不然后续过程中会报错）执行npm install -g grunt-cli

 

　　3)在nodejs工程目录下建一个package.json，内容为

 

　　其中file属性在Gruntfile.js中要用到的属性，打包源名称

 

　　然后将devDependencies下面的包给下载下来，比如下载grunt: npm install grunt --save-dev 其他包下载方式一样

 

　　需要注意的是package.json中的数据必须是严格的json数据格式（连添加注释都是不可以的）。

 

　　4) 在nodejs工程目录下建一个Gruntfile.js,内容为

 

　　里面pkg读取package.json文件，然后可以访问其内容中的属性，如pkg.file。build属性src是待压缩的文件，dest是压缩重定向到该文件。

 

　　所以现在我要建立一个src目录，目录下面保存了一个叫做jquery.js的文件

 

　　5)命令行运行：grunt

 

　　输出

 

　　创建了dest/jquery.min.js

 

　　注意：grunt命令和grunt uglify等价。当然也可以带上任务名称default：grunt default能等到同样结果。

 

　　6)总结：

 

　　grunt.initConfig：

 

　　为当前项目初始化一个配置对象，其中传入的 configObject 参数可以用在后续的task中，可以通过grunt.config 方法访问。几乎每个项目的 Gruntfile 都会调用此方法。

 

　　注意，任何 <% %> 模板字符串只会在取到配置数据后才被处理。

 

　　不同的插件有各自的参数，比如例子中的uglify插件用到的参数有options和build。详细信息需要参考各个插件。

 

　　initConfig详情参考：

 

　　grunt.loadNpmTasks：

 

　　grunt打包主要是用到各种插件，比如上面的压缩用的插件uglify。加载插件需要使用该方法。

 

　　从指定的 Grunt 插件中加载任务。此插件必须通过npm安装到本地，并且是参照 Gruntfile.js 文件的相对路径。

 

　　详情参考：

 

　　grunt.registerTask：

 

　　注册 "别名任务" 或 任务函数。此方法支持以下两种类型：

 

　　别名任务（如果指定了一个任务列表，那么，新注册的任务将会是这一个或多个任务的别名（alias）。当此"别名任务"执行时，taskList中的所有任务都将按指定的顺序依次执行。taskList 参数必须是一个任务数组。）：grunt.task.registerTask(taskName, taskList)

 

　　上面的例子就是别名任务。定义一个"default" 任务，当执行 Grunt 且不通过参数指定任务时，第二个参数中的任务将依序执行

 

　　任务函数（如果传入description和taskFunction，每当任务运行时，指定的函数（taskFunction）都会被执行。此外，当执行 grunt --help时，前面指定的描述（description）就会显示出来。特定任务的属性和方法在任务函数内部通过this对象的属性即可访问。如果任务函数返回false表示任务失败。）：grunt.task.registerTask(taskName, description, taskFunction)

 

　　下一个例子我们就试一下这个任务函数，现在刚才例子每一个步骤目的就清晰了。

 

　　详情参考：

 

　　其他的东西都没有变，Gruntfile.js变成了

 

　　然后去命令行运行: grunt bulid

 

　　和第一个不同的是运行命令必须带上了任务名称build。

 

　　注意前面提到的任何 <% %> 模板字符串只会在取到配置数据后才被处理。

 

　　有些时候为了减少请求需要合并多个文件，且需要压缩。使用uglify即可做到这一点。

 

　　Gruntfile.js代码

 

　　文件压缩的顺序按照files中定义的数组的顺序压缩。我们可以通过options.mangle来设置变量和函数名称是否压缩。还可以有下面的用法

 

　　最终jquery.js和router.js合并压缩成libs.min.js

 

　　详情参考：

 

　　首先需要下载grunt-contrib-requirejs插件：npm install grunt-contrib-requirejs --save-dev

 

　　比如我们的执行文件main.js使用的是require来模块化加载，代码如下

 

　　我们希望jquery/bootstrap/validator几个文件合并成一个，避免多次请求。

 

　　我们新建一个grunt配置文件gruntCfg.json将main.js的require文件配置代码段拷贝到这个配置文件。并写入输入输出目标。源码如下

 

　　上面include中我打乱了顺序，为了测试压缩顺序我在三个库的前面都添加了console.log(“我是” + 模块名称)。

 

　　修改Gruntfile.js

 

　　好了现在看一下相关文件的文件结构如下

 

　　执行build任务：grunt build

 

　　文件夹dest下多了一个libs.js文件

 

　　打开来看

 

　　第一行代码就有我刚才添加的console。继续找我添加的标志的话发现压缩顺序是：jQuery->bootstrap->bootstrapValidator。和我们的shim依赖顺序一致。说明合并压缩的顺序没有问题。

 

　　更多详情请查看：

 

　　我们先看一下使用别名任务来执行多个任务的情况，Gruntfile.js源码如下

 

　　执行:grunt

 

　　dest文件夹下多出了5个文件

 

　　源码解析是：任务列表有两个任务'uglify'和"requirejs"，'uglify'有三个子任务：build/ my_target1/ my_target2, "requirejs"有两个子任务main/main2。最终这五个子任务完成后生成的结果就是dest下多出的5个文件。

 

　　还可以使用任务函数方式注册多个任务。Gruntfile.js源码如下

 

　　执行：grunt log

 

　　我们使用自定义方式实现先前的多任务Gruntfile.js源码如下

 

　　执行：grunt log

 

　　照样得到先前的结果

 

　　说到底和先前的别名任务没有什么不同。

 

　　压缩src下的所有js文件，Gruntfile.js源码

 

　　执行：grunt

 

　　目标文件结构变成

 

　　src下所有的js都被压缩并保持原来的目录结构。

 

　　我们用实例来说明。现在我们的文件结构是这样子的

 

　　main.js是我们使用require的真实配置文件，源码如下

 

　　Gruntfile.js的源码

 

　　需要说明的是name指定的文件内容会在main.js配置的依赖文件压缩之前压缩，但是如果include中还包含其他非main.js依赖的文件，则会在main.js非依赖文件后面压缩。

 

　　我们的test.js源码为

 

　　然后我们执行：grunt

 

　　结果在dest下生成一个libs.js压缩文件

 

　　并且这个文件里面包含的压缩文件的顺序是:router.js->test.js->jquery.js-> bootstrap.min.js-> bootstrapValidator.min.js。

 

　　所以说配置include中文件会依序压缩到libs.js，但是main.js依赖的文件会放在最后（依赖会逐层往上查找依赖），而name指定的文件会在非依赖文件之后依赖文件之前压缩。

 

　　require模板文件打包

 

　　模板文件使用到require工程上的text.js文件，路径：

 

　　我们这里建立一个模板文件test.html

 

　　实际上现在test.html没有用到任何模板相关的运用，我们只是做打包例子，所以不管其他，我们只需要知道模板文件一般是html文件即可

 

　　现在工程的文件结构是

 

　　Gruntfile.js的源码为

 

　　执行命令行：grunt

 

　　dest文件下多了一个libs.js,查看其中是否有模板文件test.html中的内容

 

　　说明模板被一同压缩进去了。关键是"text!test.html"这句话。test会将模板test.html解析成js脚本形式。

 

　　需要用npm下载cssmin插件：npm install grunt-contrib-cssmin --save-dev

 

　　Gruntfile.js文件源码

 

　　命令行执行：grunt cssmin

 

　　两个css文件压缩打包到dest/t.min.css

 

　　需要用npm下载cssmin插件：npm install grunt-contrib-htmlmin --save-dev

 

　　Gruntfile.js源码

 

　　执行命令:grunt

 

　　test.html压缩到dest/test.html

 

　　需要下载copy插件npm install grunt-contrib-copy --save-dev

 

　　将src文件夹（包括内容和子文件内容）拷贝到dest目录下,Gruntfile.js源码

 

　　执行结果

 

　　将所有指定类型的文件提取到同一层，Gruntfile.js源码

 

　　执行结果

 

　　我们发现router/router.js被提取到了目标目录下，这也是flatten的作用

 

　　这里需要用到两个插件，下载这两个插件

 

　　grunt-contrib-watch —— 作用是实现我们一开始需求的“自动化”！它会监听需要处理的文件的变动，一旦有变动就会自动执行相应处理。但是它有一个问题，就是每当监听到一处变动时，就会大费周章地把所有被监听的文件都处理一遍；

 

　　grunt-newer —— 作用是处理上方watch的毛病，让watch在监听到某个文件变动时，仅仅对变动的文件进行事务处理。

 

　　我们以合并压缩为例，Gruntfile.js源码

 

　　上面watch任务有一个子任务watchJs监听js的变动，一旦监听到files更改就触发uglify任务。

 

　　Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里，使用Can I Use的数据来决定哪些前缀是需要的。

 

　　需要下载grunt-autoprefixer插件

 

　　Gruntfile.js源码实例

 

　　这样监听了所有css更改，每次更改都会先添加浏览器兼容前缀。我们可以放心的在样式文件中按照最新的W3C规范来正常书写CSS而不需要浏览器前缀。

 

　　总的来说grunt压缩打包都是基于插件，各种插件的作用可以查看官网文档。

 

　　在运行任务函数指定的任务的时候可以通过冒号分割来传递参数。比如下面的例子

 

　　执行：grunt test

 

　　打印：

 

　　执行：grunt test:1

 

　　打印：

 

　　执行：grunt test:1:2

 

　　打印：

 

　　正常来说我们的html/css/js文件都是用不同的文件夹保存的，所以我们可以分成三种任务来处理。这些任务都可以配置在一起，最后一次性打包，这部分根据各自实际项目情况来处理。