如果你还不了解grunt，或者只是听过它的名字而没有去研究过它，那么这篇入门级的文章就是为你写的，相信看完你就会爱上grunt！
grunt是什么？
grunt是一个非常好的自动化工具，你只管codeing，它会自动帮你将代码合并（concat）、压缩（uglify）、语法检查（jshint）、自动编译less（contrib-less）和sass（contrib-sass）、压缩图片（contrib-imagemin）、读写拷贝移动文件等等，极大地简化了你的工作，它有很多插件，前面说到的每个功能都是一个插件，如果没有符合你胃口的插件，你可以自己开发并提交到这里。
要使用grunt，从哪里开始？
OK，相信grunt提供的某些功能还是能吊起你的胃口，grunt和grunt的插件都是通过npm安装和卸载的，npm是Nodejs的包管理器，所以我们首先安装nodejs，有同学在这里就被吓到了，nodejs我完全不会啊，接下来还看得懂吗？放一万个心，完全没问题。安装nodejs很简单，打开nodejs官网，戳中间那个INSTALL按钮就好。安装好了之后打开命令行，不要告诉我你不知道什么叫命令行？OK，按下快捷键win+r键，输入cmd回车，出现一个黑黑的窗口，输入node -v回车之后会显示你刚刚安装好的nodejs版本，那就表示nodejs安装成功了，恭喜你完成了第一步！
接下来需要安装CLI，这是个什么鬼？为什么要装它？不爱问为什么的同学不是好同学。OK，CLI就是grunt的命令行，安装了CLI之后，就可以在任何目录下执行grunt命令了。什么是grunt命令？请继续往下看。
安装CLI命令：
npm install -g grunt-cli
执行完之后
接下来要讲的内容，是一个项目刚刚开始用grunt管理的时候应该怎么去做，就好像你学会了grunt，现在想将grunt应用到手上的项目中去。我们在E盘建一个demo文件夹，这个demo就好比你手上的项目。
首先在项目的根目录下（也就是demo下）新建两个文件：package.json和Gruntfile.js。
package.json里面放些什么东西呢？什么项目名称啊、版本号啊、描述之类的，当然最重要的是将项目所用到的grunt插件放到它的devDependencies字段内，它大概长这样：
{
"name":"demo",
"version":"1.0.0",
"description":"这就是个demo",
// 项目用到的grunt插件列表及插件版本号"devDependencies": {"grunt":"^0.4.5",
"grunt-contrib-concat":"~0.3.0","grunt-contrib-copy":"^0.8.0",
"grunt-contrib-jshint":"^0.11.2",
"grunt-contrib-requirejs":"~0.4.1",
"grunt-contrib-uglify":"~0.2.1",
"grunt-contrib-watch":"^0.6.1" }
}
当然了，如果你知道插件的版本号，可以直接写在这里面，如果不知道，可以在安装插件的时候在命令行后面加一个命令“--save-dev”让它自动保存在这里。
Gruntfile.js是用来配置grunt任务的，它还可以用来加载grunt插件。看到这里不明白不要紧，后面还会说。
配置好了package.json，回到命令行，切换到demo根目录下（怎么切换？直接输入E:然后回车就切换到E盘了，然后输入cd demo回车就打开demo目录），执行下面的命令会自动安装package.json里配置的grunt插件，现在知道package.json的用处了吧，执行命令前先把package.json里那句注释去掉，不然会报错
npm install
安装完后，demo里面会多出来一个node_modules文件夹，里面就是刚刚安装的grunt插件了
OK，安装步骤到这里结束，下面开始真正使用grunt的阶段了。
任务配置——文件合并
什么是任务？每个grunt插件都是一个任务，安装了上面那么些插件，都有些什么用？先来看第一个插件"grunt-contrib-concat"，它是用来合并文件的，下面看看它怎么用的吧。
先在demo下新建一个src文件夹，在里面新建3个js文件分别叫a.js、b.js和c.js；3个文件内容分别是:
// a.js内容function aaa(){
return"aaa";
}// b.js内容function bbb(){
return"bbb";
}// c.js内容function ccc(){
return"ccc";
}
那么怎么用插件"grunt-contrib-concat"来合并这3个文件呢？请在Gruntfile.js里面写入下面的内容：
module.exports = function(grunt) {
// 任务配置 grunt.initConfig({
// 配置concat任务 concat: {
options: {
// 配置合并的文件内容之间的分隔符separator:';' },
dist: {
// 要合并的文件src: ['src/a.js','src/b.js','src/c.js'],
// 合并为哪个文件dest:'dist/all.js' }
}
});
// 加载插件grunt.loadNpmTasks('grunt-contrib-concat');
}
保存之后在命令行里输入grunt concat回车，命令行输出“File 'dist/all.js' created”就表示文件合并成功了！就这么简单！
demo文件夹下会多出一个dist文件夹，里面就是合并好的文件all.js
到这一步你已经学会了grunt的基本用法了，其它任务也都是两步：一配置任务，二调用任务执行，而且任务配置好了以后只要调用命令执行就好了，一劳永逸啊。
也许你还不太理解上面Gruntfile.js的配置怎么来的？Gruntfile.js包括四个部分：
"wrapper" 函数
任务配置
加载grunt插件和任务
自定义任务
从上面的配置已经可以看得很清楚了，最外层的函数就是"wrapper"函数，任务配置即grunt.initConfig({……})这一段，grunt.loadNpmTasks(插件名称)用于加载grunt插件和任务的，最后一个自定义任务在哪呢？
自定义任务：grunt.registerTask(taskName,description,taskFunction)接收三个参数，第一个是任务名称，第二个是任务描述，第三个是任务执行时执行的函数。当第二个参数是数组时，数组内可以传入其它任务名称，当执行自定义任务时，就会执行数组内的任务。
任务配置里面配置了哪个任务，那么下面就要用grunt.loadNpmTasks加载对应的插件，这里配置的是concat这个任务，因此下面对应加载grunt-contrib-concat插件。任务配置是以任务名称命名的属性，grunt.initConfig中可以配置多个任务，每个任务的具体配置参数可以到这里找到对应的插件进行查看。
任务配置——代码压缩
接下来我们来配置多个任务，将合并后的js压缩，压缩js的插件"grunt-contrib-uglify"在package.json有配置过，在执行npm install命令的时候已经安装好了，下面开始配置：
module.exports = function(grunt) {
// 任务配置 grunt.initConfig({
// 配置concat任务 concat: {
options: {
// 配置合并的文件内容之间的分隔符separator:';' },
dist: {
// 要合并的文件src: ['src/a.js','src/b.js','src/c.js'],
// 合并为哪个文件dest:'dist/all.js' }
},
// 配置压缩任务 uglify: {
client: {
files:{
// 压缩后js路径和要压缩的js路径(没错，这里是个数组，可以直接将多个js合并后压缩)"dist/all.min.js": ["dist/all.js"]
}
}
}
});
// 加载插件grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 自定义任务grunt.registerTask("build",["concat","uglify"]);
}
执行自定义任务build
grunt build
输出的all.min.js就是合并且压缩后的代码
任务配置——文件watch+自动编译less
最后，来做一个自动编译less的案例，这个案例需要用到watch插件和less插件，这俩插件之前没有安装，那么现在安装一下
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev
后面的“--save-dev”会将这个插件及其版本号保存到package.json。安装完成后在Gruntfile.js加入配置：
module.exports = function(grunt) {
// 任务配置 grunt.initConfig({
// 配置watch任务 watch: {
// 要监听的文件files: ["less/index.less"],
// 监听的文件发生变化时执行的任务tasks: ["less"]
},
less: {
development: {
options: {
// 是否压缩编译后的csscompress:true },
files: {
// 编译后的css路径和要编译的less路径"less/index.css": ["less/index.less"]
}
}
}
});
// 加载插件grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
// 自定义任务grunt.registerTask("default",["watch"]);
}
执行任务
grunt
注意：因为配置里面自定义任务设置了default即默认任务为watch，所以命令行里输入grunt和grunt watch的效果是一样的。执行后，命令行输出
Running "watch" task
Waiting...
表示正在监听，切换到index.less去新增一些样式然后保存，watch监听到index.less有变化输出
Completed in 1.560s at Fri Jun 26 2015 23:41:22 GMT+0800 (中国标准时间) - Waitin
g...
>> File "less\index.less" changed.
Running "less:development" (less) task
File less/index.css created
同时执行了less编译任务，在less文件夹自动生成了index.css。以前用考拉（一个less编译软件）编译less，经常写了几行样式发现软件没有打开，换做grunt之后就方便多了。
以上就是本次要分享的全部内容了，是不是很轻松就入门了？如果本文对你有所帮助，麻烦点个赞吧！
欢迎大家加入笔者的软件测试技术交流群1125760266，一起交流学习
网友评论