近来做了些微信公众号程序开发,有些技术要点整理一下。
用grunt搭建自动化的web前端开发环境,必须保证电脑在联网条件下操作。
(一)配置环境
1.安装nodejs,Grunt和所有grunt插件都是基于nodejs来运行的,所以必须安装nodejs
可以去 https://nodejs.org/ 下载安装文件,安装运行即可。
安装完毕后,打开终端,执行命令“node -v”来查看nodejs的版本,也顺便试验nodejs是否安装成功。
2.安装grunt-CLI,“CLI”为“命令行”。要想使用grunt,首先必须将grunt-cli安装到全局环境中,使用nodejs的“npm install…”进行安装。
以MAC系统为例,打开终端,输入:$ sudo npm install -g grunt-cli
注意,mac os 系统、部分linux系统中,这里要加上“sudo ”指令。
回车,命令行会出现一个转动的小横线,表示正在联网加载。加载的时间看你网速的快慢,不过这个软件比较小,一般加载时间不会很长,稍一会儿,就加载完了。你会看到以下界面。引用一张图片,自己安装的时候没截图:
验证一下grunt-cli是否安装完成并生效,你只需要继续在命令行中输入“grunt”命令即可。如果生效,则会出现以下结果:
出现如图所示提示,证明安装成功。
3.在电脑上创建一个文件夹,名为TestGrunt.
接下来我们会有一系列插件的安装,他们的安装过程和grunt一样。但是他们的执行都是基于grunt的,因此才能把grunt叫做一个“构建工具”。Grunt没有具体的作用,但是它能把有具体作用的一个一个插件组合起来,形成一个整体效应。
下面我们继续安装grunt不再是全局安装了,需要在控制台进入到网站或系统的具体目录下。这里我们从终端进入$ cd /Users/mymac/Desktop/TestGrunt 目录下。然后输入以下命令。
$ npm install grunt --save --dev,回车,此时注意必须保证TestGrunt文件夹下包含两个文件,GruntFlie.js和package.json文件,否则报错。
你会看到几条warning提示,不用管它。然后接下来就是加载状态,一个旋转的小横线。稍等待一会儿,会提示你安装成功。如下图:
至此,我们可以打开我们创建的TestGrunt文件夹,可以看到里面多了一个文件夹“node_modules”
继续在终端执行 $ grunt 命令。遇到一个错误,如下图所示:
解决办法:按照提示,依次执行命令 npm install grunt-contrib-concat
“npm install grunt-contrib-concat”
"npm install grunt-contrib-clean"
"npm install grunt-contrib-copy"
"npm install grunt-contrib-uglify"
"npm install grunt-contrib-jshint"
"npm install grunt-contrib-htmlmin"
"npm install grunt-contrib-cssmin"
如图所示:
一系列安装完成以后,终端继续输入 grunt命令,运行结果如下图:
至此,说明grunt已经在这个目录下成功安装。