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文件
代码如下：
1 module.exports = function(grunt) { 2 3 // Project configuration. 4 grunt.initConfig({ 5 pkg: grunt.file.readJSON('package.json'), 6 //uglify列表 7 uglify: {//压缩js文件 8 options: { 9 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' 10 }, 11 js: { 12 src: ['js/test.js','js/test2.js'], 13 dest: 'js/all.min.js' 14 } 15 }, 16 //cssmin列表 17 cssmin: {//压缩css文件 18 target: { 19 files: [{ 20 expand: true, 21 cwd: 'css', 22 src: ['*.css', '!*.min.css'], //路径，压缩所有的css 23 dest: 'css', 24 ext: '.min.css' 25 }] 26 } 27 }, 28 //concat列表 29 concat: { 30 //合并文件 31 options: { 32 //文件内容的分隔符 33 //separator: ';', 34 }, 35 //js文件 36 js: { 37 //要合并的js文件 38 src: ['js/test.js','js/test2.js'], 39 //合并后的js文件 40 dest: 'js/all.js' 41 }, 42 //css文件 43 css:{ 44 src: ['css/index.css','css/my.css'], 45 dest: 'css/all.css' 46 } 47 }, 48 //sprite列表 49 sprite:{ //雪碧图 50 all: { 51 src: 'spriteImages/*.jpg', //选择要压缩的文件 52 dest: 'images/page1-img.jpg', //图片压缩后，图片存放的位置 53 destCss: 'css/page1-img.css' //图片压缩后，css存放的位置 54 } 55 } 56 57 }); 58 59 // 加载包含 "uglify" 任务的插件。 60 grunt.loadNpmTasks('grunt-contrib-uglify');//用于js压缩。 61 grunt.loadNpmTasks('grunt-contrib-cssmin'); //用于css压缩。 62 grunt.loadNpmTasks('grunt-contrib-concat'); //合并任意文件 63 grunt.loadNpmTasks('grunt-spritesmith');//雪碧图 64 65 // 默认被执行的任务列表。 66 grunt.registerTask('default', ['uglify','cssmin','concat','sprite']); 67 68 };
6.构建好后，运行grunt
运行后的效果图
