自动化构建工具（gulp）

gulp中文官网

gulp是基于nodejs的一套自动化构建工具，特点就是如同官网所说的一样，易于构建，易于学习，构建快速。

大致使用流程：
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
具体：
a. 安装 NodeJS，npm
npm 安装插件时语法：
npm install  name [-g] [--save-dev]
b. 选择安装 cnpm，cnpm能够替换npm的功能
npm install -g cnpm --registry=https://registry.npm.taobao.org
可使用 cnpm 安装第三方插件：
cnpm install <name> [-g] [--save-dev]
c. 全局安装 gulp
cnpm install gulp -g

（注：[ ]表示可选项，-g表示全局安装，没有此参数表示仅在当前文件夹下安装，--save是存放安装信息于packge.json，-dev是表示存放在packge.json的devDependencies依赖列表中）
前 a,b,c 三步执行一次即可


以下步骤是在项目目录下执行：
d. 进入项目目录下(命令提示符下)，创建 package.json 文件：
cnpm init
package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件
e. 项目本地安装 gulp：
cnpm install gulp --save-dev
项目目录下出现 node_modules 文件夹


文件合并：
gulp-concat
重命名：
gulp-rename
f. 项目本地安装 gulp 插件：
g. 项目根目录下创建 gulpfile.js 文件：

配置方法如下：

var gulp = require("gulp"),
	minifyCss = require("gulp-clean-css"),
	uglify = require("gulp-uglify"),
	htmlMin = require("gulp-htmlmin"),
	sass = require("gulp-sass"),
	livereload = require("gulp-livereload");

// 创建gulp任务：压缩CSS
gulp.task("css", function(){
	gulp.src("css/*.css")
	    .pipe(minifyCss())
	    .pipe(gulp.dest("dist/css"));
});

// 创建gulp任务：压缩JS
gulp.task("js", function(){
	gulp.src("js/*.js")
		.pipe(uglify())
		.pipe(gulp.dest("dist/js"));
});

// 创建gulp任务：压缩html
gulp.task("html", function(){
	gulp.src("html/*.html")
		.pipe(htmlMin({collapseWhitespace: true, minifyCSS:true, minifyJS:true}))  //压缩空白：是；压缩CSS代码：是；压缩JS代码：是；
		.pipe(gulp.dest("dist/html"));
});

// 创建gulp任务：编译 SASS
gulp.task("sass", function(){
	gulp.src("sass/*.scss")
		.pipe(sass({outputStyle: 'compressed'})) //sass输出方式：compressed
		.pipe(gulp.dest("dist/css"))
		.pipe(livereload());
});

// 创建gulp监视任务：监视到scss文件的修改则执行sass任务
gulp.task("watch", function(){
	livereload.listen();
	gulp.watch("sass/*.scss", ["sass"]);
})

// 创建gulp默认任务
gulp.task("default", ["css", "js"]);

h. 运行任务：
命令提示符下：gulp 任务名

https://www.npmjs.com 可查询各插件使用的方式

常用插件
CSS压缩：
cnpm install gulp-clean-css --save-dev
JS压缩(暂不支持ES6语法)：
cnpm install gulp-uglify --save-dev
html压缩：
cnpm install gulp-htmlmin --save-dev
sass编译：
cnpm install gulp-sass --save-dev
自动刷新：
cnpm install gulp-livereload --save-dev
安装的gulp插件要配合浏览器中的livereload插件一起使用。在访问资源时要能够自动刷新，需要在服务器环境下，即资源访问的协议为http
零配置服务器WEB容器插件：
http-server       -- 只能部署静态资源
可以将任意目录变成web容器目录
cnpm install http-server -g