grunt构建&文件合并&压缩

写这篇博客主要是为了巩固一下构建工具grunt的配置和运用.废话不多说,进入正题.

Grunt是什么?  Grunt是一个基于任务的JavaScript项目命令行构建工具，换个通俗点的说法来说，就是用来管理你的项目的，比如引入文件，压缩你的文件，合并文件等等。安装步骤如下：

一，因为Grunt依赖于Node.js，所以安装Grunt前，需先安装Node.js，很简单就是一直next就行了。

二，我们首先安装Grunt-cli，（命令行Grunt工具，可以使用grunt命令来执行task）。

在dos窗口输入以下命令，就可以安装了。

npm install -g grunt-cli

检查安装是否成功，输入命令

grunt -version

显示  grunt v1.0.1  即是安装成功（v1.0.1是版本号）

三，接下来是生成package.json文件

 1，打开dos窗口，在你的项目根目录下，输入指令 npm init。

  2，上一个操作后会出来很多讯息，然后就是填写项目名称等等，看不懂的就直接按回车。看得懂的就填。

  3，至此，package.json文件就生成了。

我的package.json生成后是这样的。

{  "name": "web3",  "version": "1.0.0",  "description": "this is a test",  "main": "gruntflie.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC"}
如果你觉得命令行生成麻烦，那么你可以自己在你的项目根目录下新建package.json文件，内容跟我生成的类似。

在dos窗口进入到项目路径(最后为grunt文件夹)，输入 npm init，以下是步骤，如果不知道怎么填，就按照我标志的填即可，我没标志的就直接按回车。

然而，此时我们还没在项目中安装Grunt及相关任务插件（注意：Grunt-cli不是Grunt）。

接下来我们安装grunt到项目中，执行命令

npm install grunt --save-dev

执行完后，返回查看项目，我们在package.json文件下已经添加了依赖

"devDependencies": {  "grunt": "^1.0.1"}

接着，我们安装Grunt插件。比如下面这两个

合成文件：grunt-contrib-concat

压缩文件：grunt-contrib-uglify

我们只需在dos窗口下输入命令

npm install --save-dev grunt-contrib-concat grunt-contrib-uglify

等待安装完成即可：返回查看package.json文件，可以发现我们的依赖又增加了我们刚才添加的插件。

最后在dos窗口输入 grunt -version 
查看一下有没有跳出版本号，有就说明成功了。

------------华丽分割线-------------

至此，我们已经顺利的安装和配置好了grunt及其插件。

我们现在知道了grunt是什么，知道为什么会有grunt，接着就是讲运用（grunt插件运用）。我po出我的Demo构造，node_modules是我们安装和配置grunt过程中自动生成的，我们不理它。common.js是我的Demo的公共功能区，drag.js scale.js是我的独立功能区，分别是拖放和缩放功能，他们都引用了common.js。Gruntfile.js下面讲。main.js是主功能区（引用了drag.js和scale.js）。mFunction.html就不要多说啦，我的Demo的html文件。package.json 在上面说过了，这里不再赘述。

下面说一下Gruntfile.js文件（貌似可以生成，不过我是粘贴复制的）。

module.exports = function(grunt) {

grunt.initConfig({pkg: grunt.file.readJSON('package.json'),concat : {//这是你要配置的任务（这个是合并）

moduleDev : {files : {//把common.js,drag.js,scale.js合并到main.js'dist/main.js' : ['common.js','drag.js','scale.js']}}},uglify : { //这个是压缩moduleDev : {files : {//把main.js压缩到 dist/main.min.js文件'dist/main.min.js' : ['dist/main.js']}}}});grunt.loadNpmTasks('grunt-contrib-concat'); //加载合成插件grunt.loadNpmTasks('grunt-contrib-uglify'); //加载压缩插件grunt.registerTask('default', ['concat','uglify']); //运行插件};

注释都说得比较清楚了，就不再多讲。最后打开dos窗口，在你的项目根目录下输入 grunt 即可运行插件啦

出现 Done即是执行成功，返回查看你的项目，发现多了一个dist文件夹，下面就是我们合并后的main.js还有压缩后的main.min.js啦。

至此我们就完成了grunt的安装，配置，及运用了。赶紧去试一下吧。

另外：写本文的目的，主要是怕自己以后忘了怎么配置和安装Grunt又要去找博客才写的。
写本文之前我看了 ‘于江水’ 的 《Grunt 新手一日入门》一文，这篇博客我喜欢他写的前面的那个故事。有兴趣的朋友可以看看。