gulp环境搭建
简介：javascript
gulp是前端开发过程当中对代码进行构建的工具，是自动化项目的构建利器；它不只对网站资源进行优化，并且在开发过程当中不少重复的任务，他能够经过明确的工具自动完成，使用它咱们不只能够很愉快的编写代码，并且大大的提升了咱们的工做效率。css
gulp是基于Node.js的自动化任务运行器，它能自动化的完成JavaScript、coffee、sass、less、html、image、css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借助了Unix操做系统的管道(pipe)思想，前一级的输出等于后一级的输入，使操做很是的简单。经过本文，咱们将学习如何使用gulp来改变开发流程，从而使开发更加高效。html
gulp与grunt很是相似，但相比于grunt很是频繁的IO操做，gulp的流操做，能更快捷的完成构建工做。前端
本文以gulp-pug为例（将pug编译为html的gulp插件）展现gulp的基本用法，只要咱们学会一个插件以后，其余插件能够看一下帮助文档java
gulp经常使用地址：node
gulp官方网址：http://gulpjs.comgit
gulp插件地址：http://gulpjs.com/pluginsgithub
gulp官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.mdexpress
gulp中文API：http://www.ydcss.com/archives/424npm
gulp构建流程
安装nodejs-->全局安装gulp-->项目安装gulp以及gulp插件 -->配置gulpfile.js-->运行任务
1.安装nodejs
说明：gulp是基于nodejs，因此须要配置node环境
安装方法：打开nodejs官网，点击Download按钮，它会根据系统信息选择对应的版本（.msi文件）。而后直接安装就能够了
2.使用命令行（熟悉命令行可跳过此步）
说明：命令行在OSX是终端（Teminal），在Windows是命令提示符（Command Prompt）；
注意：以后操做都是在Windows系统下
简介：
打开命令的方式（window+r 输入cmd回车）
node -v 查看安装的nodejs版本号，出现版本号证实安装成功，未出现请重启重试
npm -v 查看npm版本号，npm是随着nodejs一同安装的nodejs包管理器
cd 定位到目录，用法：cd+路径；
dir 列出文件列表
cls清空命令提示符窗口内容
3.npm介绍
说明：npm（node package manager）nodejs的包管理器，用于nodejs插件的安装、卸载、管理依赖等；
安装插件：
命令提示符执行 npm install <name> [-g] [--save-dev];
<name>: nodejs插件的名称；例如npm install pug --save-dev
-g：全局安装。将会安装到C:\Users\Administrator\AppData\Roaming\npm，而且写入环境变量；非全局安装：将会安装到当前定位目录；全局安装能够经过命令行在任何地方调用，本地安装会在定位目录的node_modules文件夹下，经过require()调用；
--save：将保存配置信息到package.json（package.json是nodejs项目配置文件）
-dev：保存到package.json的devDependencies节点，不指定-dev将保存到dependencies节点
卸载插件：
命令提示符执行 npm uninstall <name> [-g] [--save-dev]
删除所有插件 借助rimraf npm install rimraf -g 用法： rimraf node_modules
更新插件
命令提示符执行 npm update <name> [-g] [--save-dev]
更新所有插件： npm update [--save-dev]
查看npm帮助
命令提示符执行 npm help
当前目录已安装插件
命令提示符执行 npm list
npm安装插件过程是从：http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，因此常常下载缓慢或出现异常），解决办法往下看↓↓↓↓↓↓。
4.选装cnpm
说明：由于npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，若是npm的服务器在中国就行了，因此咱们乐于分享的淘宝团队干了这事，来自官网:
这是一个完整 npmjs.org 镜像，你能够用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽可能与官方服务同步。
官方网址：http://npm.taobao.org；
安装：
命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org ；
cnpm和npm用法彻底一致，只是在执行命令的时候把npm改为cnpm
5.全局安装gulp
说明：全局安装gulp是为了经过它执行gulp任务
安装：
命令提示符执行 cnpm install gulp -g ；
查看是否正确安装，命令提示符执行 gulp -v ；出现版本号证实安装成功
6.新建package.json文件
说明：package.json是nodejs项目中必不可少的配置文件，它包含了nodejs的配置信息以及插件信息
{
"name": "font-test", /*项目名称*/
"version": "1.0.0", /*项目版本*/
"description": "font-size", /*项目介绍*/
"main": "gulpfile.js", /*执行js入口*/
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.1",
"browser-sync": "^2.18.8",
"compass": "^0.1.1",
"gulp": "^3.9.1",
"gulp-changed": "^2.0.0",
"gulp-compass": "^2.1.0",
"gulp-html-beautify": "^1.0.1",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^7.0.0",
"gulp-pug": "^3.3.0",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"precss": "^1.4.0",
"pug": "^2.0.0-beta.12",
"cssgrace": "^3.0.0"
},
"dependencies": {
"express": "^4.15.2",
"pug": "^2.0.0-beta.12"
}
}
咱们可使用命令行工具来配置它： cnpm init
查看package.json帮助文档，命令提示符执行cnpm help package.json
特别注意：package.json是一个普通的json文件，因此不能添加任何注释。
7.本地安装gulp插件
安装：定位到项目目录后，执行 cnpm install <name> --save-dev
实例：安装gulp-pug，执行 cnpm install gulp-pug --save-dev
将会安装到node_modules的gulp-pug目录下
为了能正常使用，咱们还得本地安装gulp cnpm install gulp --save-dev
全局安装gulp是为了执行gulp命令，本地安装gulp是为了调用gulp插件功能
8.新建gulpfile.js文件（重要）
说明：gulpfile.js是gulp项目的配置文件，通常位于项目根目录（须要在package.json的main中指定该文件）
（package.json设置图）
var gulp = require("gulp"); var plugins = require("gulp-load-plugins")(); var browserSync = require("browser-sync").create(); //编译pug gulp.task("pug:compile",function() { gulp.src("src/*.pug") .pipe(plugins.changed("./build/",{extension:".html"})) .pipe(plugins.pug({ pretty:"\t" })) .pipe(gulp.dest("./build/")) })
9.运行gulp
说明：命令提示符执行 gulp+任务名称
当执行gulp就是执行gulp default的全部任务；