CMD 模块构建,从认识 Grunt 开始
来源:互联网 发布:js 屏蔽鼠标中键 编辑:程序博客网 时间:2024/06/05 10:57
这是构建过程中总结的文档,分享出来,希望能帮助大家。
关于Grunt,从一个简单的配置开始!
- pubdate: 2013-04-18 15:09
- author: zhizhong
玩儿转grunt,需要了解的知识稍微多一点,这里仅以一个简单的配置介绍grunt,希望能让你尽快的认识她。
进一步的了解,请移步官网:Grunt
简介
Q:Grunt为何物?
A:一个专为JavaScript提供的构建工具。
Q:啥是构建工具?
A:在项目部署上线前,通常要将源文件压缩,合并,并拷贝到bch或trunk中。
在将js模块化后,又多了一个分析,提取业务代码中所依赖模块的工作。
解决这一系列繁重工作的自动化工具,称之为构建工具。
Q:grunt是如何工作的?
A:刚刚接触grunt,举个例子可能不太恰当,但应该可以让你先比较准确的认识她。
就好像一个万能工厂(grunt),只负责执行任务(Task),不关心每个任务到底都干了什么。
这些任务比如:
clean:删除临时文件
uglify:压缩
qunit:测试
concat:合并
任务流程可能是这样的:
task:clean
task:uglify
task:qunit
task:concat
安装
前提是你已经安装了nodejs
和npm
。 你可以在 nodejs.org 下载安装包安装,也可以通过包管理器(比如在 Mac 上用 homebrew,同时推荐在 Mac 上用 homebrew)。
安装grunt CLI
npm install -g grunt-cli
按照官方的说法,grunt-cli
只是为了在同一台机器上安装不同的grunt
版本,那么咱们先不去管他。
在项目中使用grunt
首先需要往项目里添加两个文件:package.json
和Gruntfile.js
- package.json:该文件用来为npm存放项目配置的元数据,与grunt关系最大的配置在devDependencies中。
"devDependencies": { "grunt": "~0.4.1", "grunt-cmd-transport": "~0.2.0", "grunt-cmd-concat": "~0.2.0", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-clean": "~0.4.0" }
- Gruntfile.js:注意G的大写,这个文件就是
grunt
的配置了,其中详细定义了每个任务的细节和执行任务的顺序等。
安装grunt
在命令行进入项目所在目录,键入如下命令即可,npm
会根据devDependencies
中的配置,将需要的grunt
及其插件下载到你的项目目录中。
npm install grunt --save-dev
传说中简单的配置T-T
终于到了简单配置环节,就从Gruntfile.js
入手,一点点的认识grunt
。
一个几乎是Gruntfile.js
通用的写法:
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'); }); };
由于篇幅关系,这里只简单说下。grunt
配置的主体都在grunt.initConfig
中
pkg: grunt.file.readJSON('package.json')
是为了以后在其它任务(task)中方便读取package.json
已经定义好的值。
下面我们来了解下任务(task):
transport: { dialog: { files : [ { src : '*', dest : '.build/styles/component/dialog/src' } ] } }
transport
就是一个任务(task),她是这次spm2
所提供的一系列grunt
构建插件的其中一个,该插件主要负责提取模块中的依赖,
并为每个模块设置模块ID
。dialog
是任务的其中一个目标(Target),files
中定义了要对哪些文件执行该任务(src),
以及执行任务后,生成的文件放在什么地方(dest)。
下一个任务是合并(concat):
concat: { dialog: { files: { "dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"] } } }
concat
的内容是合并依赖的模块,有很多需要设置的地方,因为本文档目的只是介绍grunt
,
所以这里简单说,该配置采用了另外一种src
和dest
的写法。相信大家只要理解了任务(task)和目标(target)后应该很好理解。
最后,加载grunt
需要的插件:
grunt.loadNpmTasks('grunt-cmd-transport'); grunt.loadNpmTasks('grunt-cmd-concat');
还要告诉grunt该怎么执行这些任务:
grunt.registerTask('build', ['transport', 'concat']);
完整的Gruntfile.js
:
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), transport: { dialog: { files : [ { src : '*', dest : '.build/styles/component/dialog/src' } ] } }, concat: { dialog: { files: { "dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"] } } } }); grunt.loadNpmTasks('grunt-cmd-transport'); grunt.loadNpmTasks('grunt-cmd-concat'); grunt.registerTask('build', ['transport', 'concat']); };
最后的最后,进入项目所在目录,命令行输入:
grunt build
一切顺利的话,你就可以看到变化了!
- cmd 模块构建,从认识grunt开始
- CMD 模块构建,从认识 Grunt 开始
- 用grunt下载jquery cmd文件,手动构建jquery为cmd模块
- grunt构建
- 构建cmd模块的2个插件
- 关于Grunt,从一个简单的配置开始!
- AngularJS从构建项目开始
- AngularJS从构建项目开始
- AngularJS从构建项目开始
- 用grunt-cmd-xxx构建seajs项目,require css的一个坑
- 用grunt-cmd-xxx构建seajs项目时,使用alias引发的BUG
- 学驱动从模块开始
- 从零基础认识maven工程构建
- 从认识asp.net 开始(非原创)
- 页面的兼容性从认识<!DOCTYPE>开始
- 从Hello, world开始认识IL
- 页面的兼容性从认识DOCTYPE开始
- 递归基础认识 从快速幂开始
- mac下.gitconfig配置别名alias
- cocos2dx关卡选择界面设计
- Sqlite
- Java泛型 继承中类型变量的关系
- 转: 计算机的引导过程
- CMD 模块构建,从认识 Grunt 开始
- sqlite3-c-apis
- URL编码与两次encodeURI
- C# 中利用 Conditional 定义条件方法
- Oracle中REGEXP_SUBSTR函数
- NSDictionary全部API的学习。
- MySQL Workbench导出csv格式文件打开后发现数据乱码解决方法
- sqlite命令行工具
- POJ 3006 解题报告