gulp入门安装(1)

安装gulp的目的

gulp是前端开发项目构建构建工具，在开发过程中使用gulp可以避免重复的机械劳动，大大提高开发效率，比如：文件合并，文件拷贝，less编译，css压缩， js压缩，图片压缩等。

gulp常用地址：

• gulp官方网址：http://gulpjs.com
• gulp插件地址：http://gulpjs.com/plugins
• gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

1、 安装node.js

gulp基于node.js，需要配置node环境。在 node.js官网点击硕大的绿色Download按钮 下载最新版node安装包，安装包格式为msi。安装它就可以了（安装路径随意）

使用命令行

注：之后操作都是在windows系统下；

• 打开命令提示符执行下列命令（打开方式：window + r 输入cmd回车）：
• 输入指令node -v 检测是否安装成功，若出现版本号表示安装已安装成功。
• 输入指令npm -v 查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。
• cd定位到目录，用法：cd + 路径 ；ps:先不用执行这里，等全局安装gulp后再进入到指定的项目目录中。
• dir列出文件列表；
• cls清空命令提示符窗口内容。
  

2. 全局安装gulp （默认c盘目录）

输入指令 npm install -g gulp

输入指令 gulp -v，出现版本号即为正确安装。

可以使用npm root -g查看全局安装目录.

注意：从这里开始cd进入自己建的项目文件夹中。

3. 新建package.json文件

注：package.json是一个普通json文件，所以不能添加任何注释。

输入指令 npm init

4. 本地安装gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次.

PS：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

输入指令 npm install --save-dev gulp

时间有点久，等进度条...

安装完成 我遇到了一些警告

（问过学长，他说已经装好了，不用管，然后继续下一步）

5. 本地安装gulp插件

定位目录命令后提示符执行 npm install --save-dev

• 下面是一次性安装多个常用的gulp插件
  • 输入指令
  • npm install --save-dev browser-sync del gulp gulp-clean-css  gulp-html-replace gulp-plumber gulp-rename gulp-rev-collector  gulp-sass gulp-uglify gulp-concat gulp-rev node-sass run sequence

• 也可以一次安装单个插件，本示例以gulp-less为例（编译less文件）
  • 输入指令npm install --save-dev gulp-less

6 . 建立gulpfile.js文件 （重要）（自己手动新建）

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件。

此时我们的目录结构是这样子的：

├── gulpfile.js *新建

├── node_modules

│ └── gulp

└── package.json

gulpfile.js和package.json同级

更多插件配置请 查看这里 。

未完待续...

参考文章：

http://www.ydcss.com/archives/18#lesson2

http://www.cnblogs.com/2050/p/4198792.html

这是一篇讲述gulp使用中各种坑的文章，先存起来 。 http://www.qiqiboy.com/post/61

这篇讲述了文件的目录 https://segmentfault.com/q/1010000003062308?_ea=303623