使用Grunt构建项目
来源:互联网 发布:淘宝新广告法禁用词 编辑:程序博客网 时间:2024/05/18 02:46
Grunt
使用Grunt构建kissy项目
什么是Grunt?
建立在Node.js之上,Grunt是一个基于命令行的工具,用于加快工作流程,减少用于生前之前所做的准备。它可以结速工作与自动编译一同进行。基本上,你可以使用Grunt的大部分任务来帮你处理你认为乏味的,通常需要手工配置和运行的工作。
Grunt能干些什么?
按任务目标大致可分为四类:
- 文件操作型:比如合并、压缩js和css文件等(包括)
- 预编译型:比如编译less、sass、coffeescript等
- 类库项目构建型:比如 angular、ember、backbone等(这种推荐使用yeoman)
- 工程质量保障型:比如jshint、jasmine、mocha等
除此之外还有像 watch (监听文件改变,自动触发构建)等功能。
安装Grunt
grunt依赖NodeJs和npm,请确保你的计算机已经安装该环境。特别留意下grunt是有二个版本:服务器端版本(grunt)和客户端版本(grunt-cli),我们需要安装的是客户端版本。
npm install -g grunt-cli
如果你不慎安装了服务器端版,请现予以卸载:
npm uninstall -g grunt
为了确保Grunt已经正确安装,你可以运行下面的命令:
grunt –version
创建package.json文件
JSON文件使我们能跟踪和安装我们所有开发所依赖的信息。然后,对项目工作的人会拥有当前开发依赖性,最终有助于保持同步的开发环境。在项目的根目录下创建package.json文件。package.json用于配置你需要拉取的grunt插件信息:
{ "name":"grunt", // 项目名称 "version":"0.1.0", // 项目版本 "author":"dawncc", // 项目依赖 "devDependencies":{ "grunt-kmc":"*", //kmc插件 "grunt-contrib-uglify": "~0.2.0" }}
其中devDependencies字段,定义你要拉取的依赖模块,上面的代码,拉取grunt-contrib-uglify插件(用于压缩js),字段的值~0.2.0,指明需要模块的版本号,“~”是至少的意思。同时拉取grunt-kmc的所有插件。
在工程根目录启动命令行工具,运行:
npm install
通过package.json依赖关系将其中定义的插件安装在node_modules目录中。
这个时候,你的项目的根目录下会新增加一个node_modules的目录。
创建Gruntfile.js文件
Gruntfile.js本质上是一个函数,而且他的参数是grunt。它是用于配置或者定义Grunt任务和加载Grunt插件的。
在工程根目录下放个Gruntfile.js,文件内容如下:
module.exports = function(grunt) { // 构建任务配置 grunt.initConfig({ //读取package.json的内容,形成个json数据 pkg: grunt.file.readJSON('package.json'), uglify: { //文件头部输出信息 options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, //具体任务配置 <!-- build: { //源文件 src: 'src/index.js', //目标文件 dest: 'build/index-min.js' } --> build: { files: { 'build/index-min.js': ['src/index.js'] } }, } }); // 加载指定插件任务 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认执行的任务 不定义默认任务会出现 >Task "default" not found. Use --force to continue. grunt.registerTask('default', ['uglify']);};
在根目录下执行grunt
命令:“Done,without error”,说明已经构建成功,且没有错误,你可以看到grunt是非常迅速的!来看下目录,你就会看到build下出现了hello-grunt-min.js,文件内容如下:
/*! demo 2013-07-13 */!function(a){var b="<p>hello grunt!</p>";a("body").append(b)}(jQuery);
已经使用uglify压缩成功!
- 使用Grunt构建项目
- 替代glup和grunt,使用npm自动化构建项目
- 用grunt构建seajs项目
- NodeJS项目构建工具Grunt
- 用grunt构建seajs项目的总结
- grunt构建项目压缩文件和合并文件
- JavaScript 项目构建工具 Grunt的安装
- Grunt 实例之 构建 seajs 项目
- 用grunt-cmd-xxx构建seajs项目时,使用alias引发的BUG
- grunt构建
- 使用Grunt构建任务管理脚本
- 使用grunt-hub实现多个grunt项目一次运行
- windows下利用grunt进行前端项目环境构建
- javascript 前端 基于 npm、bower、grunt的标准项目构建
- 使用yo bower grunt 写angularjs项目
- 如何在rails项目中使用grunt
- Grunt-Grunt使用
- grunt构建工具使用总结(一)环境搭建
- Android 通知栏使用介绍(一)
- iOS中Cookie介绍
- 字符串匹配KMP算法详解
- 归并排序
- String与StringBuffer【转自黑马程序员】
- 使用Grunt构建项目
- Linux Shell学习笔记:exit退出状态代码
- coco2d 第一天
- Kafka分布式环境搭建
- 网络设备配置摘记
- Linux内核中的Kconfig、Makefile、.config
- A Knight's Journey
- OpenGL里用gluTessBeginPolygon画带孔和凹多边形需要非常注意的一个问题!
- Oracle与MySQL存储过程以及游标使用的区别