1.grunt是基于nodejs的，所以要先安装nodejs。
2. 安装nodejs
Grunt和所有grunt插件都是基于nodejs来运行的，如果你的电脑上没有nodejs，就去安装吧。安装nodejs非常简单，完全傻瓜式、下一步下一步下一步、的安装方式，这里不再赘述。去 https://nodejs.org/ 上，点击页面中那个绿色、大大的“install”按钮即可。
安装了nodejs之后，可以在你的控制台中输入“node -v”来查看nodejs的版本，也顺便试验nodejs是否安装成功。
注意两点。第一，grunt依赖于nodejs的v0.8.0及以上版本；第二，奇数版本号的版本被认为是不稳定的开发版，不过从官网上下载下来的应该都是偶数的稳定版。
3. 安装grunt-CLI
注意，如果你的电脑不联网，以下操作你都做不了，所以，首先保证电脑联网。
“CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。如果你不了解nodejs的npm如何安装软件，这里就先不要问了，先照着我说的做。
打开控制台（注意：windows系统下请使用管理员权限打开），输入：
注意，mac os 系统、部分linux系统中，在这句话的前面加上“sudo ”指令。
回车，命令行会出现一个转动的小横线，表示正在联网加载。加载的时间看你网速的快慢，不过这个软件比较小，一般加载时间不会很长，稍一会儿，就加载完了。你会看到以下界面。
这时候要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入“grunt”命令即可。如果生效，则会出现以下结果：
你不要管这些结果是什么意思，总之出现这些提示，证明你的grunt-cli安装成功了。
3.建立文件结构如下
dist：是用来存放被压缩后文件的
src：是用来存放压缩前的文件
package.json可以通过npm init来创建name，version，但是devDepentdencies初始为空的，后面会根据npm install grunt --save-dev，npm install grunt-contrib-uglify --save-dev，npm install grunt-contrib-qunit --save-dev，npm install grunt-contrib-concat --save-dev，npm install grunt-contrib-jshint --save-dev ，npm install grunt-contrib-watch --save-dev建立的依赖关系自动补全
Gruntfile.js 配置如下： module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' }, buildall: { options: { mangle: true, compress: { drop_console: true }, report: "min" //输出压缩率,可选值有false(不输出) }, files: [{ expand: true, cwd: 'src', //js目录下 src: '**/*.js', //所有js文件 ext: '.min.js', dest: 'dist' //输出到此目录下 }] } // dist: { // files: { // 'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] // } // } }, qunit: { files: ['test/**/*.html'] }, jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { //这里是覆盖JSHint默认配置的选项 globals: { jQuery: true, console: true, module: true, document: true } } }, watch: { // files: ['<%= jshint.files %>'], // tasks: ['jshint', 'qunit'] scripts: { files: ['src/**/*.js'], tasks: ['minall'], options: { spawn: true, interrupt: true } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // grunt.loadNpmTasks('grunt-contrib-jshint'); // grunt.loadNpmTasks('grunt-contrib-qunit'); // grunt.loadNpmTasks('grunt-contrib-watch'); // grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('minall', ['uglify:buildall']); grunt.registerTask('default', ['jshint','qunit','uglify','concat']); };
4.运行grunt uglify压缩完成
