Grunt+Bower基础教程，入门篇

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分钟 一次以保证尽量与官方服务同步。

官方地址：https://npm.taobao.org/

执行: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方式安装，用淘宝数据源</