Grunt自动化构建工具(网址：http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)

简介：Grunt是基于Node.js的项目构建工具，对于需要重复执行的任务，例如压缩、编译、单元测试等，自动化工具可以减少你的工作量，使你的工作更轻松。

一：检测nodejs是否安装好，打开CMD控制器

出现以上情况，表示已经安装好了

二：Grunt安装

首先确保你已经正确安装了nodejs环境。
1.找到要使用Grunt的项目文件包

2.然后以全局方式安装Grunt：

npm install -g grunt-cli

3.package.json文件

(1种).npm init命令会创建

(2种).直接在项目包的根目录下建一个package.json文件

4.安装插件

(1中).单个插件的添加，如安装grunt插件

npm install grunt --save-dev

项目包结构

(2种)，多个插件的添加

向已经存在的package.json 文件中添加插件的最简单方式是通过npm install <module> --save-dev命令。此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中，遵循tilde version range格式。

npm install  --save-dev

运行完后的项目包结构

5.直接在项目包的根目录下建一个Gruntfile.js文件

代码如下：

 module.exports = function(grunt) {

     // Project configuration.
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
         //uglify列表
         uglify: {//压缩js文件
             options: {
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
             },
             js: {
                 src: ['js/test.js','js/test2.js'],
                 dest: 'js/all.min.js'
             }
         },
         //cssmin列表
         cssmin: {//压缩css文件
             target: {
                 files: [{
                     expand: true,
                     cwd: 'css',
                     src: ['*.css', '!*.min.css'], //路径，压缩所有的css
                     dest: 'css',
                     ext: '.min.css'
                 }]
             }
         },
         //concat列表
         concat: {
             //合并文件
             options: {
                 //文件内容的分隔符
                 //separator: ';',
             },
             //js文件
             js: {
                 //要合并的js文件
                 src: ['js/test.js','js/test2.js'],
                 //合并后的js文件
                 dest: 'js/all.js'
             },
             //css文件
             css:{
                 src: ['css/index.css','css/my.css'],
                 dest: 'css/all.css'
             }
         },
         //sprite列表
         sprite:{ //雪碧图
             all: {
                 src: 'spriteImages/*.jpg',  //选择要压缩的文件
                 dest: 'images/page1-img.jpg', //图片压缩后，图片存放的位置
                 destCss: 'css/page1-img.css' //图片压缩后，css存放的位置
             }
         }

     });

     // 加载包含 "uglify" 任务的插件。
     grunt.loadNpmTasks('grunt-contrib-uglify');//用于js压缩。
     grunt.loadNpmTasks('grunt-contrib-cssmin');  //用于css压缩。
     grunt.loadNpmTasks('grunt-contrib-concat'); //合并任意文件
     grunt.loadNpmTasks('grunt-spritesmith');//雪碧图

     // 默认被执行的任务列表。
     grunt.registerTask('default', ['uglify','cssmin','concat','sprite']);

 };

6.构建好后，运行grunt

运行后的效果图