笔记：grunt的构建以及js文件的合成&压缩

今天我们就来一起学习如何安装grunt，以及最基础的配置。

基于对gulp的初步了解，我们类比着学习grunt的构建。

同样的，我们来总结以下要点：

1.node.js 的安装；

2.全局安装 grunt；

3跳转至你想存放grunt插件内容的文件夹；

4.创建package.json文件（重要）；

5.安装需要的对应模块；

6.创建Gruntfile.js文件（重要）；

7.开始使用；

================这是一条分割线=======================

1.安装node.js

去官网下载就可以了 https://nodejs.org/en/  （点击跳转）；

安装号之后我们来检查一下是否安装成功，我们打开cmd。

我们输入node -v 查看node版本号；再输入npm -v 查看npm版本号。

如果两个都存在就表示安装成功了。

因为所有的构建都是基于node.js的基础。

这里有一个小技巧，就是安装cnpm，这样就可以实现在国内cnpm中下载国外npm里的所有东西。

想安装的请跳转：http://blog.csdn.net/qq_38712750/article/details/71750734 （点击打开链接）

确认都安装好后进入下一步。

2.安装grunt（全局安装）

安装grunt一共需要两次，这次为第一次。

我们安装的其实并不是grunt  而是grunt-cli，因此我们 输入：

cnpm install grunt-cli -g

-g表示的是全局安装，不论你再哪里输入命令，安装的文件都可以在任意位置访问到。（本人是window系统，其他系统可能有些特殊的要求）。

让后同样的检查版本号的方式检查是否安装好

完成到这里我们就要开始进入最重要的环节。

3.跳转至你想要存放功能文件的文件夹。

4.创建package.json文件

这里我们用命令的方式生成。

输入：

cnpm init

确认信息后输入y

这时我们就去所在的文件目录中确认pacaage.josn 是否生成成功。

确认好之后进入下一步

5.再次下载grunt 注意这次不是全局安装；

输入指令（在存放文件目录中）

cnpm install grunt  --save-dev

之后我们就可以开始下载我们想要的功能模块了。

cnpm install grunt-contrib-concat --save-dev//合并文件
cnpm install grunt-contrib-uglify --save-dev//压缩文件

下载 完成后我们就来创建Gruntfile.js文件（ 注意这里的G是要大写的 ）

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        concat: {
            js_concat: {
                files: {
                    'dist/js/concat/concat.js': ['dist/js/*.js']
            }
            }
        },

        uglify: {
            js_min: {
                files: {
                    'dist/js/minfilde/concat.min.js': ['dist/js/concat/concat.js']
                }
            }
        }
        
    });

    grunt.loadNpmTasks('grunt-contrib-concat');//合并
    grunt.loadNpmTasks('grunt-contrib-uglify');//压缩
    grunt.registerTask('js_c_m', ['concat', 'uglify']);
};

注意的是file中的文件名字以及地址是可以更换的，不一定用我里面写的那一套。

这样我们就算成功安装了一系列方便的功能。

开始使用你之前安装的功能。