转载

用grunt搭建自动化的web前端开发环境-完整教程

用grunt搭建自动化的web前端开发环境-完整教程

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搭建自动化的web前端开发环境-完整教程

注意两点。第一,grunt依赖于nodejs的v0.8.0及以上版本;第二,奇数版本号的版本被认为是不稳定的开发版,不过从官网上下载下来的应该都是偶数的稳定版。

3. 安装grunt-CLI

注意,如果你的电脑不联网,以下操作你都做不了,所以,首先保证电脑联网。

“CLI”被翻译为“命令行”。要想使用grunt,首先必须将grunt-cli安装到全局环境中,使用nodejs的“npm install…”进行安装。如果你不了解nodejs的npm如何安装软件,这里就先不要问了,先照着我说的做。

打开控制台( 注意: windows系统下请使用管理员权限打开 ),输入:

用grunt搭建自动化的web前端开发环境-完整教程

注意,mac os 系统、部分linux系统中,在这句话的前面加上“ sudo ”指令

回车,命令行会出现一个转动的小横线,表示正在联网加载。加载的时间看你网速的快慢,不过这个软件比较小,一般加载时间不会很长,稍一会儿,就加载完了。你会看到以下界面。

用grunt搭建自动化的web前端开发环境-完整教程

这时候要验证一下grunt-cli是否安装完成并生效,你只需要继续在命令行中输入“grunt”命令即可。如果生效,则会出现以下结果:

用grunt搭建自动化的web前端开发环境-完整教程

你不要管这些结果是什么意思,总之出现这些提示,证明你的grunt-cli安装成功了。

正文到此结束
Loading...