http://developer.51cto.com/art/201506/479127.htm
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学、不用!
1. 前言
各位web前端开发人员,如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表 示重点)。至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt。还有一点,它完全免费,没有盗版。既强大又免费的 东西,为何不用?
当然了,你如果你能找到更好的替代grunt的其他工具也是可以的,例如gulp。Gulp未来有可能替代grunt,但是现在来说市场占有率还是不如grunt。而这种工具咱们是现在就需要用的,所有不要再犹豫了,拿来主义,先用grunt,即学即用。
本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用。篇幅可能会比较长,大家耐心看。本文例证详细、清晰的讲解每一个知识点。 但是——如果你看完本文还是不会,我还有最后一个大招。不过你可能需要付出一顿饭钱 + 一包烟钱的代价——去看看我录制的视频教程《用grunt搭建自动化的web前端开发环境》(教程中有源码下载) ,保证你看完就会用。
(PS:碰巧,本文基于windows环境写的,而视频教程是基于mac os录制的,两者兼备了)
废话不多少,视频教程你也先别看,钱别着急花。先挑战一下自己的理解能力,看下文讲述是否清晰、是否能看懂。
2. 安装nodejs
Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧。安装nodejs非常简单,完全傻瓜式、下一步下一步下一步、的安装方式,这里不再赘述。去 https://nodejs.org/ 上,点击页面中那个绿色、大大的“install”按钮即可。
安装了nodejs之后,可以在你的控制台中输入“node -v”来查看nodejs的版本,也顺便试验nodejs是否安装成功。
注意两点。第一,grunt依赖于nodejs的v0.8.0及以上版本;第二,奇数版本号的版本被认为是不稳定的开发版,不过从官网上下载下来的应该都是偶数的稳定版。
3. 安装grunt-CLI
注意,如果你的电脑不联网,以下操作你都做不了,所以,首先保证电脑联网。
“CLI”被翻译为“命令行”。要想使用grunt,首先必须将grunt-cli安装到全局环境中,使用nodejs的“npm install…”进行安装。如果你不了解nodejs的npm如何安装软件,这里就先不要问了,先照着我说的做。
打开控制台(注意:windows系统下请使用管理员权限打开),输入:
注意,mac os 系统、部分linux系统中,在这句话的前面加上“sudo ”指令。
回车,命令行会出现一个转动的小横线,表示正在联网加载。加载的时间看你网速的快慢,不过这个软件比较小,一般加载时间不会很长,稍一会儿,就加载完了。你会看到以下界面。
这时候要验证一下grunt-cli是否安装完成并生效,你只需要继续在命令行中输入“grunt”命令即可。如果生效,则会出现以下结果:
你不要管这些结果是什么意思,总之出现这些提示,证明你的grunt-cli安装成功了。
相关推荐
这是我按《用grunt搭建自动化的web前端开发环境-完整教程》写的Demo。
用Grunt搭建的一个简单的web前端自动化项目,支持js代码静态扫描、js/css文件合并、压缩、js文件监控等。
前端开源库-grunt-connect-proxygrunt connect proxy,提供一个HTTP代理作为grunt connect的中间件。
前端开源库-grunt-es6-transpilerGrunt-ES6-蒸腾器,蒸腾ES6至ES5
前端开源库-grunt-obfuscator-node咕哝模糊节点,模糊节点通过咕哝项目
前端开源库-grunt-cmd-transport-wndgrunt cmd传输wnd,将javascript传输到cmd。
前端开源库-grunt-inline-angular-templates咕哝内联角度模板,内联角度模板到HTML文件中
前端开源库-grunt-contrib-testemgrunt contrib testem,testem程序化运行程序,通过切碎机预处理增强
前端开源库-grunt-html-smoosher-install-fixgrunt html smoosher install fix是grunt html smoosher的一个版本,安装时使用了NPM,因为原始版本已经失败了一段时间…
Web-前端教程41 玩转 Grunt.zip
前端开源库-grunt-webfontGrunt WebFont,用于Grunt的最终SVG到WebFont转换器。
前端开源库-grunt-transport-pas咕哝传输pas,将javascript传输到cmd。
前端开源库-grunt-html-smoosher-install-fix-sggrunt html smoosher install fix sg是grunt html smoosher的一个版本,安装时使用了NPM,因为原始版本已经失败了一段时间…
前端开源库-grunt-pulses咕噜声脉冲,编译构建dist工具
前端开源库-grunt-typescriptgrunt typescript,将typescript编译为javascript
前端开源库-grunt-travis-lintgrunt travis lint,lint您的travis.yml文件
前端开源库-grunt-filerevgrunt filerev,使用文件内容哈希修改资产
前端开源库-grunt-clientlibsgrunt clientlibs,根据文件中的jsdoc/sassdoc符号自动生成客户端库。
前端开源库-grunt-deconst-assets咕哝取消对资产的排序,将资产提交到取消排序资产存储区
前端开源库-grunt-webp咕哝webp,将图像转换为webp格式。