Grunt使用-V1.0

浅语:grunt中文网:http://www.gruntjs.net/

第一步: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,已经上去了。大功告成!

时间: 2024-10-17 06:52:52

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

【资源共享】Rockchip I2C 开发指南 V1.0

2C设备的设备应用非常广泛,常见的包含重力传感器,触摸屏驱动芯片,音频解码等 这个文档是RK3399的I2C开发文档:<Rockchip I2C 开发指南 V1.0> 内容预览: 下载地址:http://developer.t-firefly.com/thread-12495-1-1.html

Windows环境下Android Studio v1.0安装教程

Windows环境下Android Studio v1.0安装教程 Windows环境下Android Studio v1.0安装教程 准备工具 JDK安装包. 要求:JDK 7以及以上版本. Android Studio安装文件. Windows: exe(包含SDK) (813 MB) exe(不包含SDK) (250 MB) zip (235 MB) Mac dmg (234 MB) zip (233 MB) Linux: zip (233 MB) 说明: 32位系统和64位系统是同一个安

Alien.Skin.Bokeh.v1.0.3.Incl.

Ablume.Surfmemo.v4.2.Regged-WaLMaRT\ Alien.Skin.Blow.Up.v2.0.3.MacOSX.Incl.  Alien.Skin.Blow.Up.v2.0.4.Incl. TEL:15108931101   QQ:316859986 Alien.Skin.Exposure.v3.0.0.Incl.  Alien.Skin.Exposure.v3.0.0.MacOSX.Incl.  Alien.Skin.Eye.Candy.v6.0.0a.Incl. 

wzplayer for ios 针对(mms)优化版本V1.0

wzplayer for ios针对mms优化版本发布. 1.支持mms,http,rtmp,rtsp等协议 2.支持全格式 下载地址:http://www.coolradio.cn/WzPlayer.ipa 更强大的,请使用tlplayerhttp://blog.csdn.net/tigerleap/article/details/19007057 联系方式:[email protected] QQ:514540005 版权所有,禁止转载. 发布自:http://blog.csdn.net/t

Nat.Geo.Games.DogTown.v1.0.Cracked-F4C

Macaraja.Soft.RamWizard.v3.1.2.2.Cracked-QUANTiZE\ MetaProducts.LightPad.v4.6.164.WinAll.Incl.Keygen-CRD\ MetaProducts.Portable.Offline.Browser.v5.8.3158.Incl.Keymaker.And.Patch-ROGUE\ Millionenjagd.GERMAN-ALiAS\ Mishap.An.Accidental.Haunting-OUTLAWS

主流区块链技术特点及Fabric V0.6&V1.0版本特点

声明:文章内容来源于网络. 一.主流区块链技术特点 二.Hyperledger的fabric V0.6总体架构: 对应的0.6版本的运行时架构: 0.6版本的架构特点是: 结构简单: 应用-成员管理-Peer的三角形关系,主要业务功能全部集中于Peer节点:    架构问题:由于peer节点承担了太多的功能,所以带来扩展性.可维护性.安全性.业务隔离等方面的诸多问题,所以0.6版本在推出后,并没有大规模被行业使用,只是在一些零星的案例中进行业务验证: 三.Hyperledger的fabric V

heatmap.js v1.0 到 v2.0,详细总结一下:)

前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这里: http://www.oschina.net/p/heatmap-js 目前,对于热力图的开发,百度.高德开发平台上使用的都是这款JS开源库.当然,现在还有我们公司:P 百度示例:http://developer.baidu.com/map/jsdemo.htm#c1_15 高德示例:http

【转】Windows环境下Android Studio v1.0安装教程

原文网址:http://ask.android-studio.org/?/article/9 http://android-studio.org/index.php/docs/experience/158-androidstudio-v1-0-win-install Windows环境下Android Studio v1.0安装教程 准备工具 JDK安装包.要求:JDK 7以及以上版本. Android Studio安装文件. Windows:exe(包含SDK) (813 MB)exe(不包含

效率飞速提高Four Dimension Technologies GeoTools v17.0 1CD+AutoHook.2017.v1.0.3.00 1CD

效率飞速提高Four Dimension Technologies GeoTools v17.0 1CD+AutoHook.2017.v1.0.3.00 1CD GeoTools v12.18 1CD     GeoTools写的是测绘.GIS用户心中最初但现在有这个程序它是有用的,只是任何AutoCAD用户相关的足够的命令.GeoTools现在是几乎所有的AutoCAD用户有用.它解决了很多常见的问题和地图生产的要求和编辑AutoCAD是地理数据的一个非常方便的工具捕获(GIS底图).处理.转