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。
1
|
npm install grunt |
为了便于操作,可以使用参数 -g 配置为全局安装:
1
|
npm install -g grunt |
创建项目框架
安装好 Grunt 后就可以开始创建项目了,Grunt 内置下面四种基本的项目模板:
gruntfile,创建命令:
1
|
grunt init :gruntfile |
commonjs,创建命令:
1
|
grunt init :commonjs |
jquery,创建命令:
1
|
grunt init :jquery |
node,创建命令:
1
|
grunt init :node |
我们今天创建的是 jQuery 项目,编写一个 jQuery 插件示例。现在 GitHub 创建好示例仓库 GruntDemo,然后使用桌面版工具克隆到本地,在 Git Shell 中进入仓库目录,再输入 grunt init:jquery 命令进行创建,如果当前位置已存在项目,可能会有如下提示:
如果需要覆盖,这个时候需要使用 --forece 参数:
1
|
grunt init :jquery --force |
创建项目时,需要填写一些项目的基本信息,例如项目名称、描述、仓库地址、作者信息(后面几项有默认内容)等,如图示:
OK,到这里项目就创建成功了!下面是项目的目录结构:
并且 README.md 文件的内容和格式也生成好了:
然后就可以编写插件代码了。Grunt 提供的 jQuery 插件代码框架如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
/* * GruntDemo * * 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 测试代码和页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/*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 实践:安装和创建项目框架的更多相关文章
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 前端项目构建工具---Grunt
什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...
- grunt项目构建工具
JS项目构建工具Grunt实践 一:下面来介绍下如何用grunt合并,压缩js文件. 大概步骤有如下: 1. 新建文件夹相对应的项目 比如文件名叫:gruntJs 2. 新建文 ...
- Java项目工程化之项目构建工具Maven
欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
- 项目构建工具maven的使用方法
最近在开发javaweb项目中有用到maven,以前并不是很了解,于是学习了一些相关内容,记之共享. 本篇内容在Windows环境下实施,JDK版本使用的1.7.0_79. 一.maven是什么? 简 ...
- 【项目构建工具】 Gradle笔记1
一.Gradle简介 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XM ...
- 取代 Maven?这款项目构建工具性能提升 300%
在 GitHub 上闲逛的时候,发现了一个新的项目:maven-mvnd,持续霸占 GitHub trending 榜单好几天了. maven-mvnd,可以读作 Maven Daemon,译作 Ma ...
随机推荐
- OpenRisc-42-or1200的ALU模块分析
引言 computer(计算机),顾名思义,就是用来compute(计算)的.计算机体系结构在上世纪五六十年代的时候,主要就是研究如何设计运算部件,就是想办法用最少的元器件(那时元器件很贵),最快的速 ...
- HDOJ 4696 Answers 乱搞
乱搞: rt.有1就能输出全部的数,否则仅仅能输出偶数 Answers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/1 ...
- thinkphp 统计某个字段不重复数 总数
$this->batch->count('DISTINCT intobatch');
- POJ 3277 City Horizon
标题效果: 每间房子的长度给出阴影(在间隔代表)而高度,求阴影总面积. 解题思路:矩形面积并. 以下是代码: #include <set> #include <map> #in ...
- codechef Cleaning Up 解决问题的方法
After a long and successful day of preparing food for the banquet, it is time to clean up. There is ...
- how tomcat works 读书笔记四 tomcat的默认连接器
事实上在第三章,就已经有了连接器的样子了,只是那仅仅是一个学习工具,在这一章我们会開始分析tomcat4里面的默认连接器. 连接器 Tomcat连接器必须满足下面几个要求 1 实现org.apache ...
- Java——(八)Map之LinkedHashMap、TreeMap、EnumMap实现类
------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 1.LinkedHashMap实现类 LinkedHashMap需要维护意识的插入顺序,因此性能 ...
- Python数据类型(元组、列表、字符串、字典)
元组tuple:不可修改的数据类型 ABC = ('a', 1, x, 'today') 列表list:可修改的数据类型 ABC = ['a', 1, x, 'today'] 字符串set: ABC ...
- Android Camera开发:使用TextureView和SurfaceTexture预览Camera 基础拍照demo
Google自Android4.0出了TextureView,为什么推出呢?就是为了弥补Surfaceview的不足,另外一方面也是为了平衡GlSurfaceView,当然这是本人揣度的.关于Text ...
- Java集群之session共享解决方案
随着互联网的日益壮大,网站的pv和uv成线性或者指数倍的增加.单服务器单数据库早已经不能满足实际需求.比如像盛大,淘宝这样的大型网络公司,更是如此. 集群,也就是让一组计算机服务器协同工作,达 ...