grunt 依赖nodejs,所有在使用前确保你安装了nodejs,然后开始执行grunt命令。
1.安装node
安装完成后在命令行，执行命令：
node -v
出现版本信息，说明安装完成.NPM是随同nodejs一起安装的包管理工具，能解决nodejs代码部署上的很多问题：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
2.grunt命令行（CLI）安装在全局环境下
grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查
对于已安装低版本，要更新最新版本需要先卸载，进行安装：
npm uninstall -g grunt
为了方便在全局安装grunt命令接口（CLI）
> npm install -g grunt-cli
该命令植入到你的系统中，允许从任意目录运行Grunt
3.创建目录
在本地创建项目目录：grunt_test1
创建完成，添加package.json文件 ，也可以手动生成一个文件（npm init）
命令行执行：
cnpm install grunt --save-dev
在当前目录下安装grunt依赖。 tips:淘宝npm镜像安装：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
执行后就可以使用cnpm 代替npm
cnpm install grunt --save-dev 执行之后，就会看到
node_modules模块加载 及 package.json 依赖模块会存在
4.插件安装
这里的插件有官方及第三方提供插件，区分方式 grunt-contrib 是官方标注
-
Contrib-jshint——javascript语法错误检查；
- Contrib-htmlmin ——压缩html代码
- Contrib-cssmin—— 压缩css代码
- Contrib-imagemin——压缩图片
-
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
-
Contrib-clean——清空文件、文件夹；
-
Contrib-uglify——压缩javascript代码
-
Contrib-copy——复制文件、文件夹
-
Contrib-concat——合并多个文件的代码到一个文件中
-
karma——前端自动化测试工具
先看 JS 批量压缩， 安装插件Contrib-uglify
cnpm install grunt-contrib-uglify --save-dev
会看到该插件依赖。 同时在该目录下创建文件
Gruntfile.js
这个文件尤其关键，他一般干两件事情：
① 读取package信息
② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）
Gruntfile一般由四个部分组成
① 包装函数
这个包装函数没什么东西，意思就是我们所有的代码必须放到这个函数里面
module.exports = function (grunt) { //你的代码 }
这个不用知道为什么，直接将代码放入即可
② 项目/任务配置
我们在Gruntfile一般第一个用到的就是initConfig方法配置依赖信息
pkg: grunt.file.readJSON('package.json')
这里的 grunt.file.readJSON就会将我们的配置文件读出，并且转换为json对象
然后我们在后面的地方就可以采用pkg.XXX的方式访问其中的数据了
以上描述--抄袭的，我比较懒-直接拿过用
grunt.loadNpmTasks('xxx'); 加载模块
grunt.registerTask('default', ['xxx']);默认执行任务
看看实例：
Gruntfile.js
module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify:{ js:{ files:[{ expand: true, cwd: 'src/js', src: '**/*.js', dest: 'dist/js' }] } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务 grunt.registerTask('default', ['uglify']); }
- expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
- cwd：需要处理的文件（input）所在的目录。
- src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
- dest：表示处理后的文件名或所在目录。
- ext：表示处理后的文件后缀名。
grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。
grunt.loadNpmTasks：加载完成任务所需的模块。
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。
项目目录创建src文件夹，里边有js文件夹, js文件夹下有两个js文件。
执行命令： grunt
看到由原来9.72kb ---压缩到--->5.8kb，同时生产一个压缩目录：
css,html,img压缩原理都是一样的。针对每个文件一 一 压缩。
'use strict'; module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify:{ js:{ files:[{ expand: true, cwd: 'src/js', src: '**/*.js', dest: 'dist/js' }] } }, cssmin:{ // 去除html注释 options: { collapseWhitespace: true, conservativeCollapse: true, collapseBooleanAttributes: true, removeCommentsFromCDATA: true }, css:{ files:[{ expand: true, cwd: 'src/css', src: '**/*.css', dest: 'dist/css' }] } }, htmlmin:{ options: { removeComments: true, removeCommentsFromCDATA: true, collapseWhitespace: true, collapseBooleanAttributes: true }, html:{ files:[{ expand: true, cwd: 'src/html', src: ['**/*.html'], dest: 'dist/html' }] } }, imagemin: { dist:{ options: { optimizationLevel: 3 // 定义 PNG 图片优化水平 }, files:[{ expand: true, cwd: 'src/img/', src: ['**/*.{png,jpg,jpeg}'], dest:'dist/img/' }] } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.loadNpmTasks('grunt-contrib-imagemin'); // 默认任务 grunt.registerTask('default', ['uglify','cssmin','htmlmin', 'imagemin']); // grunt.registerTask('default', ['imagemin']); // grunt.registerTask('minall', ['uglify:buildall']); }
创建一个任务起个别名：
// common task.
grunt.registerTask('build-file', 'build file', function() {
grunt.task.run('htmlmin:html');
});
// 默认被执行的任务列表。
grunt.registerTask('default', ['build-file']);
// 与下边效果一样
};