Grunt+Bower的简单应用
前言
首先要感谢那些知名的不知名的前辈们,你们的成就是我们进步的基础。
本文针对的读者是那些像之前的我一样刚刚了解Grunt和Bower这两个名字是什么,但还不知道究竟是干什么的,同样是以应用为主,已经会基本使用这些的就不需要看了,因为都是最基础的一些东西,同样如果您看了之后发现有什么不符合逻辑或常识的问题,或是有什么错误,我会非常期待您的指正。
1.安装nodeJS
grunt以及其插件都是需要依赖nodejs来运行的,所以如果你的电脑中并没有安装,那么需要安装nodejs,安装过程极其简单,就是傻瓜式的下一步直到install即可
nodejs官网:https://nodejs.org/en/
这是官网打开以后的图,我们这里安装左边的就可以了。
安装完成以后,win+r cmd 打开命令提示符窗口,输入node -v查看版本号,以验证nodejs是否安装成功
2.安装grunt-CLI
这里就与传统的安装软件方式不同了,以后安装的一些插件基本都是使用这样的方式安装的,所以先不用问这是什么东西,用的时间长了就明白是个什么东西了
首先使用nodejs的npm install方式安装grunt-CLI ,很简单,就是在命令行里输入npm install -g grunt-cli 然后回车键
分析一下这句安装命令分别代表什么:
npm install :nodejs的安装插件方式
-g:全局安装
grunt-cli:插件名
确保电脑联网且网足够快
如果安装成功的话会出现grunt-cli的目录结构,安装失败找出原因重新安装即可,成功后类似这样:
进行验证看是否安装成功:
命令行输入grunt 回车键,证明grunt-cli安装成功
grunt-cli到这里基本上就安装完成了,接下来建立一个自己的前端项目吧。
3.构建项目目录结构
这里可以1.自己先建立一个简单的进行练手,2.也可以学习以下yoman这类可以直接构建目录结构的工具(npm install -g yo),3.或者是参考一些优秀的前端工程目录结构。
这里用一个简单的例子做练手,更加方便练习,但如果想要更加专业化,还是参考上边2、3方法
在D盘或者你的任意目录下建立一个文件夹,我的是D:\1Project Workspace\New_Test_Project,然后在这个文件夹中建立需要的文件夹和文件
接下来要建立一个名叫package.json的文件,有两种建立方式:
1直接建立文本并保存为json文件,内容为:
{
"name": "new_test_project",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "ds",
"license": "ISC"
}
其中左边的名称是不可以更改的,右边的一些相当于参数的东西是可以进行更改的。
2.(推荐)在当前也就是D:\1Project Workspace\New_Test_Project这个目录下shift+右键打开命令行,输入npm init,回车键然后按照所需信息一步一步填写下来,项目名必须都是小写字母,版本号、简介等都可以不填写,一路回车下来,最后输入yes,就会发现这个文件已经建立好了:
4.安装grunt
接下来就是正主grunt的安装了,这里首先介绍一下更改npm下载源的方法,网足够好的可以跳过4.1的步骤接着往下看
4.1将下载源从国外改到淘宝
由于国外网络受网络波动影响大,时常导致下载失败,所以我们的淘宝团队将这些国外的镜像到了国内。
官方:这是一个完整 npmjs.org
镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
执行:
npm install cnpm -g --registry=https://registry.npm.taobao.org
; 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。
4.2正式安装
执行安装命令之前看一下4.1的最后一句话。
在刚才建立的项目目录中打开命令提示符,执行:cnpm install grunt --save-dev
命令分析:
cnpm install: npm方式安装,用淘宝数据源</