Grunt基本使用-V1.0

第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。

实际上,安装的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt,这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意,Grunt-cli 只是一个命令行工具,用来执行,而不是 Grunt 这个工具本身。

安装 Grunt-cli 需要使用 NPM,使用下面一行即可在全局范围安装 Grunt-cli ,换句话说,就是你可以在任何地方执行 grunt 命令:

  npm install -g grunt-cli 

 

第二步:进入一个你创建的文件夹,执行npm init,生成package.json文件。

package.json应当放置于项目的根目录中,与Gruntfile.js在同一目录中>

 

第三步:安装插件来执行我们需要的命令:

    

 

初始的文件夹:

 

初始的目录状态:package.json

 

安装 grunt npm install grunt --save-dev

 **–save-dev 表示会把刚安装的东西添加到 package.json 文件。

 

其他的文件也是这样的命令:

npm install grunt-contrib-jshint --save-dev

 

自己需要什么插件可以去github下载,有很多有趣的插件:

 

 

安装完成后就可以在json文件以来项目中看到了:

 

目录结构:

 

 

第四步:查看grunt版本

grunt --version

 

第五步:创建Gruntfile.js文件,用来执行grunt我们所需要的命令

文件格式:

 

第六步

操作1:合并文件

合并js文件下的a.js与b.js 到一个新文件

 

Gruntfile.js内容:

 

运行:grunt concatjs

运行成功!

 

查看目录文件:

生成aAndB.js;并且文件内容以";"分隔;

 

操作二:压缩,检查文件

Gruntfile.js内容:

 

jshint检查一直报错!

 

因为中的第二行,一直缺少一个分号!

去掉分号也是一直报错,说当时合并文件的时候用来分隔的";"是不需要的!晕

 

去掉后,jshint就检查对了。

 

查看目录文件:

 

第七步:实际项目中就这样?每次手动?当然不是!

grunt还有一个神器:watch!

操作一:监听GruntDemo下的一个html文件,并添加监听!

Gruntfile.js内容:

 

启动监听:

更改页面:不断更改页面文件,并保存的时候。控制台会连续打印。

 

操作二:监听js文件改变,并且当改变后,进行jshint检查与压缩。

 

执行grunt watchJs

 

文档目录:

修改shop.js文件后,又执行检查与压缩的命令。

 

我们也可以使用时间来作为戳。

 

第八步:上传我们的文件至github

 

先pull 

 

再push

 

查看github,已经上去了。大功告成!

转载:http://www.cnblogs.com/zqzjs/p/5323623.html

时间: 2024-12-30 10:28:37

Grunt基本使用-V1.0的相关文章

CGI安全漏洞资料速查 v1.0(转一)

cgi|安全|安全漏洞 ◆ CGI安全漏洞资料速查 v1.0 日期:2000-8-15     ############################################################################# 本文取自一位朋友.这本来不算是什么珍贵的东西,如果你平时注意收集的话,相信很多人都会有比这份更全面.更好的资料.但由于某些原因.这些资料一直都不肯被公开.但我是一个崇尚完全自由.完全开放.完全共享的little guys.所以我把这份资料公开了.希

Java认证宝典v1.0之SCJD篇

Java认证宝典v1.0之SCJD篇Java认证宝典v1.0之SCJD篇(本文为www.java365.com原创,版权所有,转载请注明出处) 在J2EE尚未得到规模应用以前,SCJD是java认证中的高级认证.即便现在有了SCWCD.SCJA等认证,SCJD依然有其独特的魅力. 一.考试目标 Programming Assignment Objectives Write an application program using Java technology. The application

ERP基础档案管理模块中实现多级分类档案ID号自动编码技术(V1.0)

erp|编码     ERP基础档案管理模块中实现多级分类档案ID号自动编码技术(V1.0)       本存储过程实现了多级分类档案ID号自动编码技术,本版本(V1.0)现在只实现每级3位的编码, 本版本的特点是: n          可以根据不同的数据库表产生不同的编码,达到通用化 n          调用时通过指定iIsSubNode要产生的节点编码是否是子结点还是兄弟节点来生成对应编码 进行调用本存储过程时需要注意的是需要传递节点的层次(或是叫节点的深度) 另外下一个版本(V2.0)

明日网全功能超级文件上传管理系统 V1.0 源码发布

上传 下载地址: http://www.xingworld.net/download/source/asp/20026563121_44517.zip 详细说明: http://www.xingworld.net/show.asp?root=1&branch=1&leaf=4&id=1101 =============================================================== 明日网文件上传管理系统 V1.0 版权所有: 明日网站(Xing

CodePlus C# 代码生成器 V1.0 版 推出了!

经过连续二个多星期通宵达旦地努力,终于升级好了CodePlus,原本准备在上周四我生日那天发布做为我25岁的礼物的,最后还是延迟了.不过,终于搞定,心情轻松了不少:) 新版CodePlus的功能较原有v0.9beta版的要好多了.更新的内容已经在前面的文章(CodePlus将要推出新版了:)列举一些更新出来先 )里发布过了. 现在捡主要的讲: 1.基于分层(数据库存储.数据访问层.Model层.商业逻辑层.前台表现层)思想,可生成除商业逻辑层外其余各层的80%左右的代码.当然,这些代码都是片断式

FASTREBOOT V1.0

内存驻留键盘激活的快速复位程序,按 Ctrl-F10 就可重启动DOS.源码:code segmentassume cs:code,ds:codeorg 100hbegin:jmp initzd db 'FASTREBOOT V1.0 ZDsoft 1995',0dh,0ah,'$'mes db 'Press CTRL-F10 to fastreboot!',0dh,0ah,'$'mes1 db 'Already Install!$'int9 dd ?mark db 'ZD'new_int pr

Mixer Volume Ctrler V1.0

Dos 下的声卡音量控制程序,以内存驻留键盘激活的方式控制CD-Audio,MIDI,Voice以及Master的音量(未作键盘的解封锁处理,有兴趣可加上) CTRL-F1 -- TURN MASTER VOL UP CTRL-F2 -- TURN MASTER VOL DOWN CTRL-F3 -- TURN CD VOL UP CTRL-F4 -- TURN CD VOL DOWN CTRL-F5 -- TURN FM VOL UP CTRL-F6 -- TURN FM VOL DOWN C

Game Faster V1.0

以内存驻留键盘激活的方式控制游戏的速度,在游戏中按Ctrl-F9激活,效果明显!!(未作键盘的解封锁处理,有兴趣可加上) 源码: code segmentassume cs:code,ds:codeorg 100hbegin:jmp initzd db 'FAST V1.0 ZDsoft 1995',0dh,0ah,'$'mes db 'Press CTRL-F9 to fast!',0dh,0ah,'$'mes1 db 'Already Install!$'int9 dd ?mark db '

刷机大师专业版v1.0.8新增数据备份神器

刷机大师校园合伙人第一季的活动截至4月22日已经告一段落,大奖苹果笔记本也找到了它的主人.据悉,刷机大师后续推出的"你装软件,我付钱"活动也受到了广大用户的一致好评,参与人数与日俱增.而今日,刷机大师专业版再度更新,助力大学生创业.全新的刷机大师专业版1.0.8版本更加流畅,体验甚佳. 刷机大师专业版v1.0.8版本更新要点: 1.新版管理后台上线,每天可查看收入,一目了然: 2.新增数据备份神器-备份大师: 3.更新root大师机型库,新增支持三星投影手机G3858等机型独家root