Grunt（构建工具）

• 第一步 安装node.js
  到node官网下载安装包，安装包已内置npm包资源管理器，安装即可！

• 第二步 执行配置及插件安装命令
  依次执行以下命令：
  安装grunt命令行
  命令：npm install -g grunt-cli 使用grunt，首先必须将grunt-cli安装到全局环境中
  安装grunt插件
  /**
  * grunt不是全局安装，需要安装到项目目录下
  * —save-dev 设为此目录的依赖，自动在devDependencies中创建自己
  /
  命令：npm install grunt
  命令：grunt 输出 done 代表安装成功
  安装必要插件
  /文件合并插件*/
  npm install grunt-contrib-concat

    /*js压缩插件*/
    npm install grunt-contrib-uglify
    
    /*css压缩插件*/
    npm install grunt-css
  

• 第三步 创建项目目录

  --grunt_test
    |-package.json
    |-Gruntfile.js
  

package.json
/**
* 配置项目信息
* -name 项目名称
* -version 版本号
* -devDependencies 需要使用的类库
/
{
"name": "grunt_test",
"version": "1.0.0",
"devDependencies":
{
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-css": "^0.5.4"
}
}
Gruntfile.js
/*
* 配置Grunt
/
module.exports = function(grunt)
{
/*
* 定义压缩合并
/
grunt.initConfig(
{
/*
* 合并任务
/
concat:
{
/*
* 将js文件内所有js，合并为all.js
/
dist:
{
src : ['js/.js'],
dest: 'js/all.js'
},

                /**
                 * 将css文件内所有css，合并为all.css
                 */
                css: 
                {
                  src: ['css/*.css'],
                  dest: 'css/all.css'
                }
            },
            
            /**
             * 压缩CSS
             */
            cssmin: 
            { 
                /**
                 * 将all.css,压缩为all.min.css
                 */
                css: 
                {
                    src : 'css/all.css', 
                    dest: 'css/all.min.css'  
                }  
            },
            
            /**
             * 压缩JS
             */
            uglify:
            {
                /**
                 * 将all.js,压缩为all.min.js
                 */
                build:
                {
                    src : 'js/all.js', 
                    dest: 'js/all.min.js' 
                }
            }
        })
        
        /**
         * 加载必要插件
         */
        grunt.loadNpmTasks('grunt-css');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-concat'); 
        
        /**
         * 注册必要插件
         */
        grunt.registerTask('default', ['concat','uglify','cssmin']); 
    }

• 第四步 完成环境配置

  使用grunt命令，执行相关任务