gulp环境搭建

简介：

　　gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅对网站资源进行优化，而且在开发过程中很多重复的任务，他可以通过明确的工具自动完成，使用它我们不仅可以很愉快的编写代码，而且大大的提高了我们的工作效率。

---

　　gulp是基于Node.js的自动化任务运行器，它能自动化的完成JavaScript、coffee、sass、less、html、image、css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借助了Unix操作系统的管道(pipe)思想，前一级的输出等于后一级的输入，使操作非常的简单。通过本文，我们将学习如何使用gulp来改变开发流程，从而使开发更加高效。

　　gulp与grunt非常类似，但相比于grunt非常频繁的IO操作，gulp的流操作，能更快捷的完成构建工作。

　　本文以gulp-pug为例（将pug编译为html的gulp插件）展示gulp的基本用法，只要我们学会一个插件之后，其他插件可以看一下帮助文档

gulp常用地址：

　　gulp官方网址：http://gulpjs.com

　　gulp插件地址：http://gulpjs.com/plugins

　　gulp官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

　　gulp中文API：http://www.ydcss.com/archives/424

---

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的所有任务；