JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架
JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及启动静态服务器。
安装 Grunt
推荐 Windows 用户使用 Git Shell 来进行命令行操作。安装 Windows 桌面版 GitHub 的时候会自动安装 Git Shell。
GitHub for Windows 下载地址： http://windows.github.com
Grunt 运行于 Node.js 环境，这里假设你已经安装了 Node.js 和 NPM。
npm install grunt
为了便于操作，可以使用参数 -g 配置为全局安装：
npm install -g grunt
创建项目框架
安装好 Grunt 后就可以开始创建项目了，Grunt 内置下面四种基本的项目模板：
gruntfile ，创建命令：
grunt init :gruntfile
commonjs ，创建命令：
grunt init :commonjs
jquery ，创建命令：
grunt init :jquery
node ，创建命令：
grunt init :node
我们今天创建的是 jQuery 项目，编写一个 jQuery 插件示例。现在 GitHub 创建好示例仓库 GruntDemo，然后使用桌面版工具克隆到本地，在 Git Shell 中进入仓库目录，再输入 grunt init:jquery 命令进行创建，如果当前位置已存在项目，可能会有如下提示：
如果需要覆盖，这个时候需要使用 --forece 参数：
grunt init :jquery --force
创建项目时，需要填写一些项目的基本信息，例如项目名称、描述、仓库地址、作者信息（后面几项有默认内容）等，如图示：
OK，到这里项目就创建成功了！下面是项目的目录结构：
并且 README.md 文件的内容和格式也生成好了：
然后就可以编写插件代码了。Grunt 提供的 jQuery 插件代码框架如下：
/*
* GruntDemo
* https://github.com/bluesky/grunt-demo
*
* Copyright (c) 2013 BlueSky
* Licensed under the MIT license.
*/
( function ($) {
// Collection method.
$.fn.awesome = function () {
return this .each( function () {
$( this ).html( 'awesome' );
});
};
// Static method.
$.awesome = function () {
return 'awesome' ;
};
// Custom selector.
$.expr[ ':' ].awesome = function (elem) {
return elem.textContent.indexOf( 'awesome' ) >= 0;
};
}(jQuery));
同时还生成了相应的 Qunit 测试代码和页面：
/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/
/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/
( function ($) {
module( 'jQuery#awesome' , {
setup: function () {
this .elems = $( '#qunit-fixture' ).children();
}
});
test( 'is chainable' , 1, function () {
// Not a bad test to run on collection methods.
strictEqual( this .elems.awesome(), this .elems, 'should be chaninable' );
});
test( 'is awesome' , 1, function () {
strictEqual( this .elems.awesome().text(), 'awesomeawesomeawesome' , 'should be thoroughly awesome' );
});
module( 'jQuery.awesome' );
test( 'is awesome' , 1, function () {
strictEqual($.awesome(), 'awesome' , 'should be thoroughly awesome' );
});
module( ':awesome selector' , {
setup: function () {
this .elems = $( '#qunit-fixture' ).children();
}
});
test( 'is awesome' , 1, function () {
// Use deepEqual & .get() when comparing jQuery objects.
deepEqual( this .elems.filter( ':awesome' ).get(), this .elems.last().get(), 'knows awesome when it sees it' );
});
}(jQuery));
下篇预告：《JavaScript 项目构建工具 Grunt 实践：任务和指令》，敬请期待……
您可能感兴趣的相关文章
经典的白富美型 jQuery 图片轮播插件 精心挑选的优秀 jQuery Ajax 分页插件 十款精心挑选的在线CSS3代码生成工具 让人爱不释手的13套精美网页图标素材 10套精美的免费网站后台管理系统模板
本文链接： JavaScript 项目构建工具 Grunt 实践：简介和安装
编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
推荐阅读 ◆ 最受欢迎的文章 期待已久的2012年度最佳 jQuery 插件揭晓 Web 前端工程师和设计师必读精华文章推荐 分享10套精美的免费网站后台管理系统模板 分享13套非常精美 Web 应用程序图标素材 12款优秀的Twitter Bootstrap组件和工具 8个非常惊艳的 HTML5 和 JavaScript 特效 35款特别精致的 HTML5 和 CSS3 网页模板 60款值得珍藏的 jQuery 幻灯片演示和下载
分享到： 新浪微博 QQ空间 腾讯微博 人人网 开心网 豆瓣 0
作者： 山边小溪
出处： jizhula.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。
分类: JavaScript , 实用工具 , 我的博文
标签: javascript , Node.js , Grunt , Grunt教程 , Grunt安装
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架的详细内容...