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 ...
随机推荐
- JAVA 内存泄露的理解
1 什么是内存泄露? 内存泄露是指没用的对象持续占有内存空间,造成内存空间浪费.所以说JAVA是有内存泄露的. 2 内存泄露的原因是什么? 较长生命周期对象持有短生命周期对象的引用,导致短生命周期对象 ...
- Secant Method (Website)
Secant Method: https://www.youtube.com/watch?v=qC9xnsfOd30 Secant Method : http://mathworld.wolfram ...
- ZEDBOARD启动自启配置(加载镜像) 分类: OpenCV ubuntu shell ZedBoard Eye_Detection 2014-11-08 18:53 167人阅读 评论(0) 收藏
参考:陆书14.2.8 1)备份ramdisk8M.image.gz 2)加载rootfs镜像文件: 3)在镜像目录下建立自己所需文件夹(挂载目录): 我需要的挂载目录有两个: root/qt/ins ...
- gitlab hooks
之前一直用文件同步工具进行两台服务器之间的同步 最初的目的是吧gitlab的代码库同步到开发环境中运行 实时的 ,后来由于gitlab的代码仓库的代码不是实时的 于是在即使同步不适合 我的需求. 后来 ...
- 【Spring五】AOP之使用注解配置
AOP使用注解配置流程: 1.当spring容器启动时候. < context:component- scan base-package= "cn.itheima03.sprin ...
- Linux chmod
在Linux中要修改一个文件夹或文件的权限我们需要用到linux chmod命令来做. 语法如下: chmod [who] [+ | - | =] [mode] 文件名 命令中各选项的含义为 u 表示 ...
- Java_Activiti5_菜鸟也来学Activiti5工作流_之初识常用服务类和数据表(二)
/** * 代码清单中使用 ProcessEngines类加载默认的流程配置文件(activiti.cfg.xml),再获取各个服务组件的实例. * RepositoryService主要用于管理流程 ...
- win2008 64位下.net 无法访问oracle
这两天换了台新机子,就想弄个新系统win2008 64bit来测试下,也尝尝新鲜,结果是碰的头破血流啊,哈哈就像挖宝似的 环境:win2008 64bit + IIS7+.net2.0 +ORACLE ...
- django连接已有的数据库
以连接postgresql为例: 1.安装psycopg2,下载地址:http://www.stickpeople.com/projects/python/win-psycopg/ 2.配置setti ...
- JSP技术
1. JSP技术简介 JSP全称是Java Server Pages,它和servlet技术一样,都是SUN公司定义的一种用于开发动态web资源的技术.是sun公司定义的一种规范,JSP实际上就是Se ...