安装gulp以及简单的使用

好记性不如烂笔头，很多东西久了不用还是会易忘，特别是技术性的东西或是繁琐的操作

gulp 是前端的构建工具，配置不繁琐，而且学起来也容易。
安装gulp之前确保你安装nodejs,如果没安装可以参考这篇文章

安装gulp

$ npm install gulp -g

-g代表全局安装 如果是mac,加上sudo 因为mac全局安装需要权限还需要输入密码，如下

$ sudo npm install gulp -g

安装成功之后，接下来我们需要开始使用gulp了，一步一步操作

• 新建一个文件夹demo

2. 进入demo目录:

$ cd demo

3. 初始化一下npm创建package.josn:

$ npm init

一路回车键

目前demo的目录

• 下来gulp登场:

npm install gulp --save-dev

你肯定有疑问，为什么还要再安装一下？前面不是安装过了吗？因每个单独的项目要使用gulp都需要再安装一次。--save-dev是把gulp写进package.josn的依赖中

安装gulp中

安装gulp成功之后目录多了一个node_modules文件夹

• gulp有集成很多功能，比如gulp-less、 gulp-cssmin、 gulp-uglify、 gulp-connect、 gulp-concat 、gulp-imagemin、 gulp-clean。常用有less转css的gulp-less、css压缩体积的gulp-cssmin、js压缩体积的gulp-uglify、也可以用图片压缩gulp-imagemin。安装全部命令：

$ npm install gulp-less gulp-cssmin gulp-uglify gulp-connect gulp-concat gulp-imagemin gulp-clean open --save-dev

压缩命令执行

• 根目录创建gulpfile.js文件，使用gulp必备配置文件。如果想如何配置可以自行网上搜索，这里提供代码链接复制哈

• 新建文件夹src ，为什么必须要是src？因为gulpfile.js文件指定src,你也可以修改配置文件的文件夹名。

• 进入src文件夹新建demo.html 和js文件夹，在里面随便写点什么,

src目录

• 最后一步了：终端运行命令

$ gulp

然后在index.html编辑代码看看浏览器有啥变化没？

使用bower下载第三方类库

1. 检测是否安装 $ bower -v
2. 如果没有则安装$ npm install bower -g
3. 在demo目录下 $ bower install xxx 比如下载angular-ui-router $ bower install angular-ui-router
4. 搞定。

完成