使用grunt压缩js文件

1.Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。所以要先在自己的电脑上安装Node.js。Node.js可以在官网下载：
https://nodejs.org/zh-cn/
选择自己对应的电脑系统版本下载，安装很简单。安装完成后在cmd窗口命令执行：node --version 查看Node.js 是否安装成功。

2.Node.js安装完成后开始准备grunt的内容
(1). 安装 CLI
cmd 窗口执行： npm install -g grunt-cli 命令
(2). 准备一个grunt项目
项目可以在 idea 中建立，也可以在任意磁盘下建立，我这里是在磁盘下建立的，项目目录结构：

• project
  • |-grunt_test
    • |-build
      • |-js
    • |-src
      • |-js

(3). 在项目的 grunt_test 文件夹下准备两个文件：package.json 和 Gruntfile.js。Gruntfile.js的首字母一定要大写。
package.json文件的内容：

{
	"name": "project",
	"version": "0.1.0",
	"devDependencies": {
		"grunt": "^0.4.5",
		"grunt-contrib-jshint": "~0.10.0",
		"grunt-contrib-nodeunit": "~0.4.1",
		"grunt-contrib-uglify": "^0.5.1"
	}
}

Gruntfile.js 文件的内容：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),//加载我们项目中的package.json 文件
    //uglify 就是我们要执行的操作
    uglify: {
      //options:可选项，js 压缩完成后在文件内写入项目名称和时间
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
      	//files: key和value。key是压缩后的js文件路径以及名称，value是被压缩的文件路径以及名称
        files: {
			'build/js/jquery.min.js': ['src/js/jquery.js']
		}
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

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

};

项目目录：

(4). 编写好文件内容之后，在 grunt_test 文件目录下打开 cmd 窗口，在窗口执行 npm install grunt --save-dev 命令，安装 grunt 到当前项目目录下。

安装完成后会在 grunt_test 文件夹下多出一个 node_modules 文件夹和一个 package-lock.json 文件。到这里 grunt 安装完成。

(5). 压缩js用到 grunt-contrib-uglify 插件，我们需要把这个插件安装到我们的项目中，同样的在 grunt_test 文件目录下打开 cmd 窗口，在窗口执行 npm install grunt-contrib-uglify --save-dev 命令安装插件。插件安装好以后要在 Gruntfile.js 文件中进行配置，上面的代码是已经配置好的，并且有说明。
(6). 把我们要压缩的js文件放在 src\js 目录下，在 grunt_test 目录打开cmd 窗口，执行 grunt uglify 命令。

看到 Done 之后我们去 build\js 目录下找到已经压缩好的 js 文件。

打开文件，我们可以看到js文件已经压缩完成，上面还有我们配置的信息。

到这里，使用 grunt 压缩 js 文件已经完成。grunt 还有很多其他的功能，可以自己到 grunt 官网学习如何使用。
https://www.gruntjs.net/