grunt打包工具小记(一入门)
首先感谢推荐叶小钗同学,顺带记录下.
grunt
是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:
- 压缩文件
- 合并文件
- 简单语法检查
全局安装之后,在需要打包的目录下使用
grunt
grunt使用package.json来配置所需要的信息
用gruntfile来
1.读取package信息
2.插件加载,注册任务,运行任务(grunt对外接口)
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),//package入口
concat: {
options: {
separator: ';'//表明头部的注释,以及分割上下JS文件
},
dist: {
src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
dest: 'dest/libs.js'
}//资源路径
},
uglify: {//压缩
build: {
src: 'dest/libs.js',
dest: 'dest/libs.min.js'
}
}
});
//插件注册
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat', 'uglify']);//运行任务合并以及压缩
}
以上是普通写法
接下来是与requirejs的配合(顺便记录下requirejs的用法)
main.js
require.config({
baseUrl: '',//默认路径,还有一种写法是写成data-main=""
shim: { //这里有一点不懂,主要是不知道所说的非AMD写法是怎么样的,但是有一个很好的模版是:
$: {
exports: 'zepto'
},
_: {
exports: '_'
},
B: {
deps: [
'_',
'$'
],
exports: 'Backbone'
}
},
paths: {
'$': 'src/zepto',
'_': 'src/underscore',
'B': 'src/backbone'
}
});
requirejs(['B'], function (b) {
});
这里是一个其他人的main.js的模版
主要是jquery-UI的部分功能插件似乎没有按照AMD的写法,以及必须依赖于jquery,所以在这里写入
shim: {
'jquery.ui.core': ['jquery'],
'jquery.ui.widget': ['jquery'],
'jquery.ui.mouse': ['jquery'],
'jquery.ui.slider':['jquery'],
"zepto.touch":"Zepto",
"zepto.fx":"Zepto"
}
map的用法
/*模块规则配置*/
map:{
'*': {
'jquery': 'jquery-private',
'tomLib':'tomLib'
},
"jquery-private":{
"jquery":"jquery"
}
}
设置requirejs的配置
{
"requirejs": {
"main": {
"options": {
"baseUrl": "",
"paths": {
"$": "src/zepto",
"_": "src/underscore",
"B": "src/backbone",
"Test": "src/Test"
},
"web": {
"include": [
"$",
"_",
"B",
"Test"
],
"out": "dest/libs.js"
}
}
}
}
}
然后grunt build
然后接下来的部分有些是关于node的,所以下次再接着写.
主要是现在已经0:56了,又困又累,小偷懒一下吧