首页 > 代码库 > 闲话和grunt

闲话和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-devgrunt.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 concatgrunt cssmingrunt uglify

     

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

  

闲话和grunt