前段时间因为项目中的报表写了一个Jquery插件，开源到github上，参考以往大神们写的插件的姿势，决定搞了像模像样一点。言归正传。前端工程师对这些工具：Node,bower,grunt,npm这些工具应该都很熟悉。今天就简单介绍一下grunt的用法。
grunt的介绍及安装请看着：getting-started，中文文档，写的也比较详细。
一个完整grunt项目小包含以下模块或配置文件
- npm:node的包管理器，管理（安装）相关插件
- grunt-cli:执行grunt任务的工具，但是注意安装了grunt-cli并不意味着安装了grunt，因为grunt是具体包含在项目中的，npm会更具package.json中的插件信息自动下载到grunt项目目录，通常包含在node_modules目录中。
- package.json:插件及项目配置信息文件。
- Gruntfile.js grunt任务的定义配置文件。
定义 一个简单的Gruntfile.js：
module.exports = function (grunt) {
grunt.initConfig({
// 从自定义的json配置文件读取信息，方便后面应引用
pkg: grunt.file.readJSON("example.jquery.json"),
// 引用上面读出来的信息定义一个版权信息头，其实就是用变量拼接一段字符串，后面合并压缩的时候就可以使用这个版权信息
meta: {
banner: "/*\n" +
" * <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" +
" * <%= pkg.description %>\n" +
" * <%= pkg.homepage %>\n" +
" *\n" +
" * Made by <%= pkg.author.name %>/<%= pkg.author.email %>\n" +
" * Under <%= pkg.licenses[0].type %> License\n" +
" */\n"
},
// 定义一个合并js的任务和一个合并css，只不过这里只有一个js文件和一个css文件，只是简单的拷贝并加上版权信息头
concat: {
dist: {
src: ["src/jquery.example.js"],
dest: "dist/jquery.example.js"
},
css: {
src: ["src/jquery.example.css"],
dest: "dist/jquery.example.css"
},
options: {
banner: "<%= meta.banner %>"
}
},
// 定义一个js语法检查的任务
jshint: {
files: ["src/jquery.example.js"],
options: {
jshintrc: ".jshintrc"
}
},
// 定义一个压缩js的任务，并加上版权信息在头部
uglify: {
my_target: {
src: ["dist/jquery.example.js"],
dest: "dist/jquery.example.min.js"
},
options: {
banner: "<%= meta.banner %>"
}
},
// 定义一个压缩css的任务，并加上版权信息在头部
cssmin: {
css: {
src: ['src/jquery.example.css'],
dest: 'dist/jquery.example.min.css'
},
options: {
banner: "<%= meta.banner %>"
}
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask("default", ["jshint", "concat", "uglify", "cssmin"]);
};
然执行如下命令：
#将命令行的当前目录转到项目的根目录下。
#执行npm install命令安装项目依赖的库。
#执行 grunt 命令。 npm install
grunt
下面简单介绍一下bower
bower是一个前端包管理工具，功能类似于LInux的yum,MacBook中的brew,只不过管理的包或软件类型不一样。安装bower工具聚义参照官网说明。今天要说的是如何把自己github上的包上传到bower库进行管理。其实也很简单，就是register命令：
$bower register mypackage https://github.com/mygithub/mypackage
Package example registered successfully!
上传好了会有相关的提示信息，好了之后你就可以使用以下命令来查看上传的包的信息了：
$bower info example
然后使用下面的命令来安装包：
$bower install example --save
如果想把上传的包删了重新上传，使用以下命令：
$bower unregister example
unregister是要认证的，需要使用GitHub的密码进行身份验证。
详细的使用方法请使用--help参数来查看。
$bower register --help
$bower unregister --help
使用以上方法，最近写了个jQuery的小插件，请大家多多关照，GitHub地址：https://github.com/zealzhangz/jquery-dropdown-checkboxes