闲话和grunt

　　一年半没更新是因为自己转岗了，android framework+system转前端，可以想象过程之苦逼，苦成了一首诗：很烦很烦/非常烦/非常非常十分烦/特别烦特烦/极其烦/贼烦/简直烦死了/啊——。烦之余秉承人丑多看书的古训，啃书无数，成笔记百余篇，不成体系。每每回想，总是忘却了大多数，于是要整理一下，如趁尚未排泄出去要反刍几口，回味一下。

　　整理自是从近及远整理，所以随笔内容应该是由难到易，自顾自说，完全不考虑旁观人士。

　　开始。

　　最近在看grunt，说简单点就是个前端管理工具，如maven、ant之于java。放在一年半前，我会说“前端工程还需要管理？”，在经历了对QA无数次“JS没更新、你Ctrl+F5刷新一下嘛”，对运营“又要压缩？我一个一个文件压缩很累的”，对PL“这文件夹下都100多个文件了，没分类，还好多重构后废弃的”之后，我终于感觉到，前端还是需要管理的。

　　grunt是什么？是一个运行在node上的插件，所以要运行grunt先要把node的环境搭建好。

　　grunt能做什么？合并，压缩，混淆，编码重命名，修改html中的引用，甚至于语法检测、单元测试等等。

　　这样说是没有概念的，首先全局安装grunt-cli

npm install -g grunt-cli

　　现在你就可以使用grunt这个命令了，但这是米有意义的，因为grunt-cli的功能是调用当前目录下的grunt模块，本身不具备任何功能。也就是说grunt是局部安装的，这样不同的项目可以使用不同版本的grunt。

　　好了，现在要新建一个文件夹，进入然后执行

npm init    //按指示生成package.json，如果单纯测试grunt，这个文件是可以缺失的
npm install grunt --save-dev    //安装并保存依赖到package.json

　　再次执行grunt会提醒Gruntfile.js文件的缺失，这是grunt所有行为的入口，所以要新建Gruntfile.js文件，这个文件的结构分为4部分。

1. wrapper

   module.exports = function(grunt) {
     // 所有的代码写在这里，注意传入参数grunt
   };

2. 任务配置

   grunt.initConfig({
       concat: {},
       cssmin: {},
       uglify: {}
   });

3. 加载插件

   grunt.loadNpmTasks('grunt-contrib-concat');  //前提是使用npm install grunt-contrib-concat --save-dev
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-uglify');

   这个部分可被load-grunt-tasks替代，在wrapper第一行进行配置

   require('load-grunt-tasks')(grunt);    //速度较慢，同样需要install

4. 自定义任务

   grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

   执行grunt时默认执行default任务，如果这个部分缺失，则需要使用下列命令分别执行第2部分中注册的任务

   grunt concat
   grunt cssmin
   grunt uglify

以上是grunt的入门部分，官网相对更加详尽，下一篇简述下Gruntfile.js中task的配置规则。