gulp 安装

1. 简介

　　作为一个前端，现在的世界 So 疯狂，内容更新太多太快，一转眼入行快3年，还是感觉自己菜，一入前端深似海啊！从此......，你懂的！

2. 说明

　　现在很多人都在讨论新技术，gulp 也是其中的一种。话说 grunt 我都还不熟呢，gulp就出来了，相比之下，gulp 确实比 grunt 方便，至少我感觉是，代码量精简了不少。

　　现在让我们来安装使用 gulp 吧！

3. 安装 gulp

　　说不得又得提起 node.js 一切插件和组件都离不开它，现在本机上使用的版本是: v4.4。不得不说版本跃迁的好快。

　　现在新版本已经默认有 npm 命令，也已经添加了环境变量。所以就直接开始了。

　　熟悉的 cmd 打开

　　3.1、说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

　　3.2、使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev]；

　　3.2.1、<name>：node插件名称。例：npm install gulp-less --save-dev

　　　　  npm install -g gulp --save-dev 

　　　　-g 表示全局安装，默认安装在 node 目录的 node_modules 文件里面

　　　　--save 将保存配置信息至package.json（package.json是nodejs项目配置文件）；

　　　　-dev 保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；

　　  　 安装完成后可以使用 gulp -v 命令来查看当前的 gulp 的版本号。 如果没有或者报错，说明安装不成功。当然这种情况很少见。

　　3.3 npm 相关

　　　　npm help 　　查看帮助

　　　　npm list   　　当前目录已经安装的包

　　　　npm update <name> [--save-dev]  更新<name>包

　　　　npm update [--save-dev]    全部更新

4. gulp 常用工具包

　　gulp 安装完成后可以安装一些插件用来构建我们的代码

　　4.1. 安装插件

　　　　　

npm install --save-dev gulp-less gulp-sass gulp-concat gulp-rename gulp-jshint  gulp-uglify gulp-watch

 

　　将插件安装到你所需要的文件目录中。可以一次性安装多个插件，也可以分开安装。一次性安装，每个插件用空格隔开，上面的插件人如其名，看字面意思就可以基本了解这些插件是做什么用的。

　　4.2. 安装插件出现问题

　　　　楼主在安装插件的时候，遇到一个问题，就是 gulp-sass 老是安装失败，可能是因为墙的厉害，所以有一种办法，就是选装淘宝的 cnpm

　　　　4.2.1 安装 cnpm

　　　　　　

npm install -g cnpm --save-dev registry="https://registry.npm.taobao.org"

　　　　这是淘宝的 cnpm 源。为淘宝点赞。安装后使用 cnpm -v 可以查看版本号来确认是否安装成功。

　　　　cnpm 的命令和 npm 的命令一样，所以可以使用 cnpm 直接来安装 gulp-sass

　　　　4.2.2 安装 gulp-sass

　　　　淘宝安装时，会在你当前目录的 node_modules 目录中创建一个 .npminstall 目录，该目录里面有很多 从淘宝npm 中列举的各种包和插件，我们只需要 gulp-sass

　　　　所以，直接在命令行输入

　　　　

cnpm install -g --save-dev gulp-sass

　　　　它将会在 node_modules 创建一个 gulp-sass 的快捷方式， 其指向 .npminstall  目录中的 gulp-sass 文件夹

　　　　其他的插件安装也可以采用 淘宝 cnpm 方式来进行安装

 

5. 入口文件 gulpfile.js

　　5.1 gulpfile.js 是gulp 项目的配置管理文件。位于文件的根目录

　　5.2 里面文件大概内容是：

　　

6. 运行gulp

　　6.1 说明：命令提示符执行gulp 任务名称

　　6.2 如果需要运行在 gulpfile.js 中的单个任务或者模块 ： gulp 任务名称

　　6.3 在命令行输入gulp default， 可以编译gulpfile.js 的全部内容["任务名称1"，"任务名称2" ]

7. 结语

　　7.1 需要安装node环境

　　7.2 需要使用 npm 或者 cnpm

　　7.3 全局安装gulp 和具体目录 安装gulp 

　　7.4 安装 gulp 插件

　　7.5 配置 gulpfile.js 

　　7.6 运行 gulp 任务名称 

　　7.7 具体详细使用可以到 gulp 的官网查看 　点我跳转。