首页 > 代码库 > 闲话和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部分。
- wrapper
module.exports = function(grunt) { // 所有的代码写在这里,注意传入参数grunt};
- 任务配置
grunt.initConfig({ concat: {}, cssmin: {}, uglify: {}});
- 加载插件
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
- 自定义任务
grunt.registerTask(‘default‘, [‘concat‘, ‘cssmin‘, ‘uglify‘]);
执行grunt时默认执行default任务,如果这个部分缺失,则需要使用下列命令分别执行第2部分中注册的任务
grunt concatgrunt cssmingrunt uglify
以上是grunt的入门部分,官网相对更加详尽,下一篇简述下Gruntfile.js中task的配置规则。
闲话和grunt