前段时间说要学习grunt很久了，可是这两周不是在做项目就是在去做项目的路上.现在终于可以好好得去入门了。边学边写，就把这个过程说一下吧。
首先，Grunt 依赖 Node.js 所以先要安装node.这里附上node的安装方法
安装 Grunt
实际上，安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具本身。
方法如下：
1 npm install -g grunt-cli
可能npm在中国比较慢，可以加上一个淘宝的镜像：--registry=https://registry.npm.taobao.org ，即输入：
1 npm install -g grunt-cli --registry=https://registry.npm.taobao.org
控制台出现了这个的时候代表已经安装成功了。（需要注意，因为使用 －g 命令会安装到全局，可能会涉及到系统敏感目录，如果用 Windows 的话，可能需要你用管理员权限，如果用 OS X ／ Linux 的话，你可能需要加上 sudo 命令。）
编写package.json
在项目文件夹下面，打开命令行，输入指令
1 npm init
之后就出来很多信息，然后开始填写项目名称，填写好了之后回车即可。或者一路回车下去。这时就会生成一个文件，叫package.json 里面的信息是自动生成的：
1 { 2 "name": "node", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo "Error: no test specified" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC" 11 }
接下来你就可以在编辑器里面修改你的 package.json的代码了
Grunt 和插件
可是我们现在还是没使用到grunt和它的插件，我们日常的项目有什么东西是需要的呢？
比如：检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。
就现在的这个示例项目而言，我打算让 Grunt 帮忙实现下面几个功能：
差不多就是这些，根据这些任务需求，需要用到：
- 合并文件：grunt-contrib-concat
- 语法检查：grunt-contrib-jshint
- Scss 编译：grunt-contrib-sass
- 压缩文件：grunt-contrib-uglify
- 监听文件变动：grunt-contrib-watch
- 建立本地服务器：grunt-contrib-connect
它们的命名和文档都很规范，因为这些是官方提供的比较常用的插件。这些插件同时都是 NPM 管理的包，比如grunt-contrib-concat - npm 你也可以在这上面看到用法等。
下面我们就要在这个项目中安装这些插件，执行命令：
npm install grunt --save-dev
表示通过 npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。不信你打开 package.json 文件看下，是不是多了
1 "devDependencies": { 2 "grunt": "^0.4.5" 3 }
没错，这个的意思就是当前项目依赖 grunt，后面是它的版本，咱们不用管。如果安装的时候没有添加 —save-dev 参数，这里就不会出现了，你需要自行添加上去。
下面我们来安装 Grunt 的插件，当然，不需要一个个的安装，太麻烦了，我们可以：
1 npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
这时你的package.json文件就变成了这样：
1 { 2 "name": "zyy_node", 3 "version": "1.0.0", 4 "description": "for zyy to learn grunt", 5 "main": "index.js", 6 "dependencies": { 7 "grunt-contrib-concat": "^0.5.1", 8 "grunt": "^0.4.5", 9 "grunt-contrib-connect": "^0.11.2", 10 "grunt-contrib-sass": "^0.9.2", 11 "grunt-contrib-uglify": "^0.10.0", 12 "grunt-contrib-watch": "^0.6.1" 13 }, 14 "devDependencies": { 15 "grunt": "^0.4.5" 16 }, 17 "scripts": { 18 "test": "echo "Error: no test specified" && exit 1" 19 }, 20 "keywords": [ 21 "grunt" 22 ], 23 "author": "zyy", 24 "license": "MIT" 25 }
配 Gruntfile.js
Gruntfile.js可以写任意的 JS 代码，比如声明一个 对象 来存储一会要写任务的参数，或者是一个变量当作开关等等。
1 module.exports = function(grunt) { 2 //所有的代码要包裹在里面 3 };
按照官网，里面的主要是为三个部分：
- 初始任务配置
- 插件加载
- 任务注册
顾名思义，这三块代码，任务配置代码就是调用插件配置一下要执行的任务和实现的功能，插件加载代码就是把需要用到的插件加载进来，任务注册代码就是注册一个 task，里面包含刚在前面编写的任务配置代码。
这样，就可以用 grunt 来执行注册的一个 task 从而根据任务配置代码调用需要的插件来执行相应的操作。
下面来分别看一下这三块代码的写法。
任务配置代码
例如下面代码：
1 module.exports=function(grunt){ 2 grunt.initConfig({ 3 pkg: grunt.file.readJSON('package.json'), //功能是读取 package.json 文件 4 uglify: { 5 //新建了一个基于 uglify 的任务 build，功能是把 src/<%= pkg.name %>.js 压缩输出 build/<%= pkg.name %>.min.js 6 options: { 7 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */ ' 8 }, // <%= pkg.name %> 来输出项目名称） 9 build: { 10 src: 'src/<%= pkg.name %>.js', // 内容是把 XX.js 压缩输出到 xx.min.js 里面 11 dest: 'build/<%= pkg.name %>.min.js' 12 } //如果你需要更多压缩任务，也可以参照 build 多写几个任务 13 } 14 less:{ 15 //这里的配置是根据less插件的配置文档来配置的 16 css:{ 17 files:{ 18 //前面是要生成的css，后面是要编译的sass 19 'src/index.css':'src/index.sass' 20 } 21 } 22 }, 23 watch: { 24 less:{ 25 files:['src/*.less'], 26 tasks:['less'] 27 } 28 }//这里的配置是根据watch插件的配置文档来配置的 29 }); 30 31 grunt.loadNpmTasks('grunt-contrib-sass'); 32 //监控 33 grunt.loadNpmTasks('grunt-contrib-watch'); 34 35 grunt.registerTask('default',['watch']); 36 }
下面是一个实例，编译出sass:
/* * @Author: zyy * @Date: 2015-11-05 12:33:50 * @Last Modified by: Marte * @Last Modified time: 2015-11-05 12:38:57 */ module.exports = function(grunt) { var sassStyle = 'expanded'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { output : { options: { style: sassStyle }, files: { 'try.css': 'try.scss' } } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.registerTask('outputcss',['sass']); grunt.registerTask('default'); };
然后在目录下打开控制台：，执行一下 grunt 命令，结果报错 undefined，没错，因为我们的 default task 里面没有定义任何任务，然后执行 grunt outputcss 命令，提示编译 Scss 文件成功。
（重要提醒，首先你的电脑得装有sass,安装教程 http://www.imooc.com/article/1413）
回到目录，发现这样就多了两个文件了
合并文件
合并文件使用的是 grunt-contrib-concat ，将自己的js文件合并为一个。
1 module.exports = function(grunt) { 2 3 var sassStyle = 'expanded'; 4 5 grunt.initConfig({ 6 pkg: grunt.file.readJSON('package.json'), 7 sass: { 8 output : { 9 options: { 10 style: sassStyle 11 }, 12 files: { 13 'try.css': 'try.scss' 14 } 15 } 16 }, 17 concat: { 18 options: { 19 separator: '', //两个文件直接的分隔符，可以为 ";" 也可以什么都不填 20 }, 21 dist: { 22 src: ['Storage.js', 'bodyOnload.js'], //将我的文件和别的小伙伴的文件合并到了一起 23 dest: 'all.js', //变成了一个文件 24 }, 25 }, 26 27 }); 28 29 grunt.loadNpmTasks('grunt-contrib-sass'); 30 grunt.loadNpmTasks('grunt-contrib-concat'); 31 32 grunt.registerTask('outputcss',['sass']); 33 grunt.registerTask('concatjs',['concat']); 34 35 grunt.registerTask('default');
检查语法 grunt-contrib-jshint压缩 grunt-contrib-uglify语法检查相对严格，对于一般的js漏掉 ";"分号，就会报错，或者 if( a == 0 )这类也会被报错，我们在写代码的时候应该要规范一点,写成 if（a === 0）。1 module.exports = function(grunt) { 2 3 var sassStyle = 'expanded'; 4 5 grunt.initConfig({ 6 pkg: grunt.file.readJSON('package.json'), 7 sass: { 8 output : { 9 options: { 10 style: sassStyle 11 }, 12 files: { 13 'try.css': 'try.scss' 14 } 15 } 16 }, 17 concat: { 18 options: { 19 separator: '', 20 }, 21 dist: { 22 src: ['Storage.js', 'bodyOnload.js'], 23 dest: 'all.js', 24 }, 25 }, 26 uglify: { 27 compressjs: { 28 files: { 29 'all.min.js': ['all.js'] //将all.js压缩成all.min.js 30 } 31 } 32 }, 33 jshint: { 34 all: ['all.js'] //此处语法严格，也有没那么严格的模式，可去管网查 35 }, 36 }); 37 38 grunt.loadNpmTasks('grunt-contrib-sass'); 39 grunt.loadNpmTasks('grunt-contrib-concat'); 40 grunt.loadNpmTasks('grunt-contrib-jshint'); 41 grunt.loadNpmTasks('grunt-contrib-uglify'); 42 43 grunt.registerTask('outputcss',['sass']); 44 grunt.registerTask('concatjs',['concat']); 45 grunt.registerTask('compressjs',['concat','jshint','uglify']); 46 grunt.registerTask('default'); 47 };
当然，你可以用grunt-contrib-watch实时监控变化 和grunt-contrib-connect 来实时刷新窗口 （前提是你按了Crtl+s）
1 module.exports = function(grunt) { 2 3 var sassStyle = 'expanded'; 4 5 grunt.initConfig({ 6 pkg: grunt.file.readJSON('package.json'), 7 sass: { 8 output : { 9 options: { 10 style: sassStyle 11 }, 12 files: { 13 'try.css': 'try.scss' 14 } 15 } 16 }, 17 concat: { 18 options: { 19 separator: '', 20 }, 21 dist: { 22 src: ['Storage.js', 'bodyOnload.js'], 23 dest: 'all.js', 24 }, 25 }, 26 uglify: { 27 compressjs: { 28 files: { 29 'all.min.js': ['all.js'] 30 } 31 } 32 }, 33 jshint: { 34 all: ['all.js'] 35 }, 36 watch: { 37 scripts: { 38 files: ['Storage.js','bodyOnload.js'], 39 tasks: ['concat','jshint','uglify'] 40 }, 41 sass: { 42 files: ['try.scss'], 43 tasks: ['sass'] 44 }, 45 livereload: { 46 options: { 47 livereload: '<%= connect.options.livereload %>' 48 }, 49 files: [ 50 'hello.html', 51 'try.css', 52 'all.min.js' 53 ] 54 } 55 }, 56 connect: { 57 options: { 58 port: 9000, 59 open: true, 60 livereload: 35729, 61 // Change this to '0.0.0.0' to access the server from outside 62 hostname: 'localhost' 63 }, 64 server: { 65 options: { 66 port: 9001, 67 base: './' 68 } 69 } 70 } 71 }); 72 73 grunt.loadNpmTasks('grunt-contrib-sass'); 74 grunt.loadNpmTasks('grunt-contrib-concat'); 75 grunt.loadNpmTasks('grunt-contrib-jshint'); 76 grunt.loadNpmTasks('grunt-contrib-uglify'); 77 grunt.loadNpmTasks('grunt-contrib-watch'); 78 grunt.loadNpmTasks('grunt-contrib-connect'); 79 80 grunt.registerTask('outputcss',['sass']); 81 grunt.registerTask('concatjs',['concat']); 82 grunt.registerTask('compressjs',['concat','jshint','uglify']); 83 grunt.registerTask('watchit',['sass','concat','jshint','uglify','connect','watch']); 84 grunt.registerTask('default'); 85 };
最后的控制台
最常用的就这几个插件，在各种大神博客的帮助下，终于入门了，以后会继续去网站上挖掘一些自己需要的东西。稀稀拉拉写了三天多，希望能够给到grunt小白一个帮助吧
参考文档：