前端项⽬构建⼯具---Grunt
grunt是javascript项⽬构建⼯具，在grunt流⾏之前，前端项⽬的构建打包⼤多数使⽤ant。(ant具体使⽤可以google)，但ant对于前端⽽⾔，存在锻炼方法
不友好，执⾏效率低，学习成本⾼的问题。所以最近⼏年对于前端构建⼯具--grunt就应运⽽⽣。
按任务⽬标⼤致可分为四类：
1. ⽂件操作型：⽐如合并、压缩js和css⽂件等（包括）。
2. 预编译型：⽐如编译less、sass、coffeescript等。
3. 类库项⽬构建型：⽐如 angular、ember、backbone等.
4. ⼯程质量保障型：⽐如jshint、jasmine、mocha等.
下⾯我们最主要来讲下第⼀种(⽂件合并与压缩)。因为不管什么项⽬在上线之前都要对⽂件压缩或者有合并的⽂件要合并，也就是说减少请求数和代码体积减少，提⾼前端性能⽅⾯。在学习grunt之前我们都知道grunt依赖于nodeJS平台。也就是说我们要安装grunt 必须先安装nodeJS环境和NPM环境。
由于我⽬前做的项⽬都是基于window下的所以我这边讲的都是基于windows下的安装，如果想要了解linux或者unix环境下安装可以google 下。
然后再命令⾏中直接运⾏如下命令即可：
打印出版本号说明已经安装好了。该引导步骤会将⽂件安装到C:\Program Files (x86)\nodejs\⽬录下，并将该⽬录添加进PATH环境变量。
1. ⾸先我们需要了解的是什么是NP兵役年龄
M？NPM能做什么？
npm是node的包管理器，我们在开发nodejs应⽤程序的过程中，可能需要依赖许许多多的第三⽅模块以提⾼开发效率，那么此时，我们就需要npm来辅助安装所需package。
2. 按照步骤如下：
2. 将npm源代码解压到⽐如D:\npm⽬录中。
3. 执⾏命令进⼊npm⽂件中执⾏如下命令：
出现如上⾯信息说明npm已经按照好了。
特别留意下grunt是有⼆个版本：服务器端版本（grunt）和客户端版本（grunt-cli），我们需要安装的是客户端版本。如果我们茶树菇炒肉
现在已经安装了服务器版本的话，我们可以卸载掉：如下命令就ok npm打印机已暂停
uninstall -g grunt。
客户端安装命令npm install -g grunt-cli 如下图所⽰：
出现如上显⽰说明也已经安装好了！其中 -g安装全局NodeJs模块。下⾯我们需要package.json⽂件。
假设你有个⼯程⽬录叫nodejsDemo，在⼯程根⽬录放个package.json.
package.json是npm的包配置⽂件，package.json⽤于配置你需要拉取的grunt插件信息，⽐如下⾯的代码：
{
"name": "gruntJs",
"version": "1.0.0",
"devDependencies": {
"grunt": "~0.4.0",
"gru积极心态
nt-contrib-jshint": "~0.1.1",
"grunt-contrib-uglify": "~0.1.2",
"grunt-contrib-concat": "~0.1.1"
}
}
但是要提醒下⼤家 package.json 中 devDependencies 内部的版本⼀定要对应，刚开始配置时候⼀直配置不上报错有可能是版本的问题所以安装我上⾯的版本来是ok的。
留意devDependencies字段，定义你要拉取的依赖模块，上⾯的代码，拉取grunt-contrib-uglify插件（⽤于压缩js）及grunt-contrib-concat 插件(⽤于合并⽂件)，字段的值~0.1.1，指明需要模块的版本号，“~”是⾄少的意思。
在⼯程根⽬录启动命令⾏⼯具，运⾏npm install 如下图所⽰：
出现如上⾯信息也说明已经配置成功了，依赖拉取成功后，在nodejsDemo⼯程中⽣成了node_modules⽬录，该⽬录就包含了如下⼏个⽂件：
到此准备⼯作已经ok了！接下来我们Page什么意思
需要Gruntfile.js配置。
1. 先在⼯程⽬录nodejsDemo下创建⼀个⽂件夹src ⽤于存放所有的js⽂件。⾥⾯⽬前包含2个js⽂件 grunt.js 和bb.js 现在我需要的是对src⽬录下的grunt.js和bb.js进⾏压缩与合并操作。
2. 接下来我要在⼯程⽬录nodejsDemo创建⼀个Gruntfile.js 内容代码如下：
// 配置
grunt.initConfig({
pkg : adJSON('package.json'),
concat: {
domop: {
src: ['src/grunt.js', 'src/bb.js'],福字图片书法
dest: 'dest/domop.js'
}
},
uglify: {
build: {
src : 'dest/domop.js',
dest : 'dest/domop-min.js'
}
}
});
/
/ 载⼊concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
};
说明有concat是合并的意思他的意思是指src⽂件夹下的gwin10激活工具一键永久激活免
runt.js和bb.js 先合并到dest⽂件夹下的domop.js中。然后接着压缩压缩⽂件为domop-min.js。
接下来我们只需要运⾏如下命令即可：
如上所⽰：说明已经完成合并与压缩操作了。我们可以在根⽬录看到动态⽣成了⽂件夹 dest 然后在⾥⾯有2个⽂件如下：
说明⼀切都ok了！
所有grunt的代码，必须放在ports函数内，参数grunt为grunt对象，当你运⾏命令grunt时，grunt系统会去读此函数的grunt构建配置。
grunt.initConfig(obj)
initConfig⽤于配置构建信息，第⼀个参数必须是个object。
// 构建任务配置
grunt.initConfig({
});
adJSON(path)
读取⼀个json⽂件，通常我们会把构建任务的基本配置写在独⽴的json⽂件内，⽅便我们修改。
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成个json数据
pkg: adJSON('package.json')
});
grunt.loadNpmTasks(pluginName).
加载指定插件任务.
注册任务，⽐如下⾯的代码：
注册默认执⾏的任务，即你运⾏grunt命令时，触发的任务构建。第⼆个参数为任务⽬标名，在initConfig()中配置：
// 配置
grunt.initConfig({
pkg : adJSON('package.json'),
concat: {
domop: {
src: ['src/grunt.js', 'src/bb.js'],
dest: 'dest/domop.js'
}
},
uglify: {
build: {
src : 'dest/domop.js',
dest : 'dest/domop-min.js'
}
}
});
⽂件的简单正则匹配语法
⽂件名（⽬录路径）的匹配，基本上和ant⼀样。
1. * 指匹配除了/外的任意数量的字符，⽐如foo/*.js.
2. ? 指匹配除了/外的单个字符.
3. ** 指匹配包含/的任意数量的字符，⽐如foo/**/*.js.
4. ! 指排除指定⽂件，⽐如src: 七年级上册数学知识点归纳
['foo/*.js', '!foo/bar.js']。
5. {} 可以理解为“or”表达式，⽐如src: 'foo/{a,b}*.js'。
