闲话和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的配置规则。