gulp---基于流的自动化构建工具
Gulp
介绍：自动化构建工具，可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。
特点
1.任务化
2.基于流(数据流 io:input/output )操作
i. 整个操作都是基于数据流进行操作
ii. 具备属于gulp的内存，所有的操作全部在gulp的内存当中
iii. 对应着输入流和输出流。会将数据通过 src 方法输入，通过 dest 方法输出。
3.简易化的API
官网网站:https://gulpjs.com/
中文网:https://www.gulpjs.com.cn/
插件中心:https://gulpjs.com/plugins/
安装
tip：首先确保已安装node和npm
首先通过npm来安装一下gulp
初始化项目package.json
npm init
全局安装gulp-cli
npm install gulp-cli -g
局部安装gulp(在你的项目根目录)
npm install gulp@3 --save-dev
tip:全局安装也可以使用 npm install --global gulp ，但是却不能够随意的在项目目录切换gulp版本，不够灵活，所以选择使用 gulp-cli
安装完成后，在项目目录下开启 cmd ，输入 gulp ，出现下面的提示则表示安装成功。
No gulpfile found
使用
一般情况下，使用 gulp ,主要有两步操作，第一步，注册事件，第二步执行默认事件。
// 注册
gulp.task('事件名',function(){
})
// 默认事件
gulp.task('default',['参数'])
gulp演示配置
下面为了讲解gulp的基本功能，将目录结构模拟成项目的目录结构，大致如下:
// src 目录项目的根目录
src
--| dist 编译之后的代码所在目录
--|--| js 编译之后的js
--|--| css 编译之后的css
--| css 待编译的css
--|--| 01.css 用于测试的css文件
--|--| 02.css 用于测试的css文件
--| js 待编译的js
--|--| 01.js 用于测试的js文件
--|--| 02.js 用于测试的js文件
--| less 待编译的less文件
--|--| 03.less 用于测试的less文件
index.html 首页文件
gulpfile.js gulp配置文件
gulpfile.js文件的创建
首先，我们先来创建一个 gulpfile.js 文件，因为gulp执行之后会默认的在当前目录查找这个文件。
文件创建好之后，现在文件中引入gulp，并且先设置好 default 事件。
var gulp = require("gulp");
gulp.task("default",[]);
JS文件的处理
压缩 js 代码我们需要使用三个插件，先通过下面的命令在终端（cmd）进行安装。
npm install gulp-concat gulp-uglify gulp-rename --save-dev
安装完成后，我们可以在 package.json 文件中检查一下：
{
"name": "src",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",//已安装成功
"gulp-rename": "^1.4.0",//已安装成功
"gulp-uglify": "^3.0.2"//已安装成功
}
}
上面代码中我已经注释出来，已安装成功。为了避免安装失败导致的报错，尽可能的在每次安装插件后都检查一下 package.json 文件，看一下是否插件被写入其中。
安装完成后，完成下面处理js文件的代码：
//首先将插件引入
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
//注册js事件
//由于gulp基于流的构建方式，其方法调用可写为链式调用
gulp.task("js",function(){//在回调函数中return返回数据
return gulp.src("js/*.js")//将文件读取到gulp的内存空间中
//js/*.js 获取到js目录下的所有js文件
.pipe(concat("bundle.js"))//将读取到的js文件合并代码到bundle.js文件
.pipe(gulp.dest("dist/js/"))//将bundle.js输出到指定目录
.pipe(uglify())//将代码压缩
.pipe(rename({suffix:".min"}))//设置压缩文件的后缀名，// suffix 后缀名 .min ，也可以不传入一个json，而是直接传入一个文件名，例如bundle.min.js
.pipe(gulp.dest("dist/js/"))//将压缩文件输出到指定目录
})
//设置默认任务
gulp.task("default",[]);
完成代码后，在终端中执行：
gulp js
可以在dist/js目录查看到压缩之后的 bundle.min.js 文件。
less文件的处理
首先安装两个插件，与js文件处理安装方法相同：
npm install gulp-less gulp-clean-css --save-dev
安装后别忘了去查看一下是否安装成功~~然后完成下面代码：（友情提示：代码是在上面代码的基础上增加了less文件处理的部分，不用重新打哦0.0）
//首先将插件引入
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
//注册js事件
//由于gulp基于流的构建方式，其方法调用可写为链式调用
gulp.task("js",function(){//在回调函数中return返回数据
return gulp.src("js/*.js")//将文件读取到gulp的内存空间中
//js/*.js 获取到js目录下的所有js文件
.pipe(concat("bundle.js"))//将读取到的js文件合并代码到bundle.js文件
.pipe(gulp.dest("dist/js/"))//将bundle.js输出到指定目录
.pipe(uglify())//将代码压缩
.pipe(rename({suffix:".min"}))//设置压缩文件的后缀名，// suffix 后缀名 .min ，也可以不传入一个json，而是直接传入一个文件名，例如bundle.min.js
.pipe(gulp.dest("dist/js/"))//将压缩文件输出到指定目录
})
//注册less编译事件
gulp.task("less",function(){
return gulp.src("less/*.less")
.pipe(less())//将less文件编译为css文件
.pipe(gulp.dest("css/"))//将文件输出到css目录，便于和css文件一起压缩
})
//设置默认任务
gulp.task("default",[]);
完成代码后，在终端中执行：
gulp less
可以在css目录查看到压缩之后的 03.css文件。
css文件的处理
处理css文件，插件都有了，直接上代码：
//首先将插件引入
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
//注册js事件
//由于gulp基于流的构建方式，其方法调用可写为链式调用
gulp.task("js",function(){//在回调函数中return返回数据
return gulp.src("js/*.js")//将文件读取到gulp的内存空间中
//js/*.js 获取到js目录下的所有js文件
.pipe(concat("bundle.js"))//将读取到的js文件合并代码到bundle.js文件
.pipe(gulp.dest("dist/js/"))//将bundle.js输出到指定目录
.pipe(uglify())//将代码压缩
.pipe(rename({suffix:".min"}))//设置压缩文件的后缀名，// suffix 后缀名 .min ，也可以不传入一个json，而是直接传入一个文件名，例如bundle.min.js
.pipe(gulp.dest("dist/js/"))//将压缩文件输出到指定目录
})
//注册less编译事件
gulp.task("less",function(){
return gulp.src("less/*.less")
.pipe(less())//将less文件编译为css文件
.pipe(gulp.dest("css/"))//将文件输出到css目录，便于和css文件一起压缩
})
//注册css事件
gulp.task("css",function(){
return gulp.src("css/*.css")
.pipe(concat("build.css"))
.pipe(cleanCss({compatibility:"ie8"}))//cleanCss方法进行代码压缩，并且传入参数 compatibility ，能够让代码的压缩适应ie8
.pipe(rename("build.min.css"))
.pipe(gulp.dest("dist/css/"))
})
//设置默认任务
gulp.task("default",[]);
完成代码后，在终端中执行：
gulp css
可以在dist/css目录查看到压缩之后的 build.min.css 文件。
异步执行
less转换成css文件后才执行css事件，即css的编译是依赖于less的，所以我们在css事件中传入第二个参数，就会在执行css事件之前先等待less事件的完成（异步）。
//注册css事件
gulp.task("css",["less"],function(){
return gulp.src("css/*.css")
.pipe(concat("build.css"))
.pipe(cleanCss({compatibility:"ie8"}))//cleanCss方法进行代码压缩，并且传入参数 compatibility ，能够让代码的压缩适应ie8
.pipe(rename("build.min.css"))
.pipe(gulp.dest("dist/css/"))
})
默认事件也是异步任务，将我们注册的事件传入默认事件的第二个参数数组当中：
//设置默认任务
gulp.task("default",["js","less","css"]);
//1.gulp.task("default",[])
//在终端中输入glup执行，代表执行默认任务,此时默认任务的第二个参数为空，所以只执行default
//2.gulp.task("default",["js","less","css"]);
//第二个参数不为空时，参数里的任务也都执行
//如果在终端中想单独执行某个事件：gulp + 事件名 eg：gulp js
//第二个不为空时，运行事件异步顺序为：
//PS D:\gulp\src> gulp
// [21:07:47] Using gulpfile D:\gulp\src\gulpfile.js
// [21:07:47] Starting 'js'...
// [21:07:47] Starting 'less'...
// [21:07:47] Finished 'less' after 32 ms
// [21:07:47] Starting 'css'...
// [21:07:47] Finished 'js' after 78 ms
// [21:07:47] Finished 'css' after 38 ms
// [21:07:47] Starting 'default'...
// [21:07:47] Finished 'default' after
此时执行过程中，我们会发现执行的顺序其实是一个异步执行的顺序，如果我们想要采取同步顺序，只需要将每个事件中的return去掉即可。
半自动编译
下载插件：
npm install gulp-livereload --save-dev
代码GOGOGO...
//首先将插件引入
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
//注册js事件
//由于gulp基于流的构建方式，其方法调用可写为链式调用
gulp.task("js",function(){//在回调函数中return返回数据
return gulp.src("js/*.js")//将文件读取到gulp的内存空间中
//js/*.js 获取到js目录下的所有js文件
.pipe(concat("bundle.js"))//将读取到的js文件合并代码到bundle.js文件
.pipe(gulp.dest("dist/js/"))//将bundle.js输出到指定目录
.pipe(uglify())//将代码压缩
.pipe(rename({suffix:".min"}))//设置压缩文件的后缀名，// suffix 后缀名 .min ，也可以不传入一个json，而是直接传入一个文件名，例如bundle.min.js
.pipe(gulp.dest("dist/js/"))//将压缩文件输出到指定目录
.pipe(livereload())
})
//注册less编译事件
gulp.task("less",function(){
return gulp.src("less/*.less")
.pipe(less())//将less文件编译为css文件
.pipe(gulp.dest("css/"))//将文件输出到css目录，便于和css文件一起压缩
.pipe(livereload())
})
//注册css事件
gulp.task("css",["less"],function(){
return gulp.src("css/*.css")
.pipe(concat("build.css"))
.pipe(cleanCss({compatibility:"ie8"}))//cleanCss方法进行代码压缩，并且传入参数 compatibility ，能够让代码的压缩适应ie8
.pipe(rename("build.min.css"))
.pipe(gulp.dest("dist/css/"))
.pipe(livereload())
})
//注册半自动监听事件
gulp.task("watch",["default"],function(){//传入参数default
//开启监听
livereload.listen();
//确认监听的目标以及绑定相应的任务
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"]);
})
//设置默认任务
gulp.task("default",["js","less","css"]);
在需要监听的事件后面启用监听。（将这个方法写到每个事件里）
.pipe(livereload());
在终端中执行：
gulp watch
现在我们只要一更改内容，就会自动编译。例如：将css/01.css中的width:500px;改为600px; 则dist/css/build.min.css里的压缩内容也会随之更改。
全自动编译
老样子，下载插件：
npm install gulp-connect --save-dev
上代码：
//首先将插件引入
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect");
//注册js事件
//由于gulp基于流的构建方式，其方法调用可写为链式调用
gulp.task("js",function(){//在回调函数中return返回数据
return gulp.src("js/*.js")//将文件读取到gulp的内存空间中
//js/*.js 获取到js目录下的所有js文件
.pipe(concat("bundle.js"))//将读取到的js文件合并代码到bundle.js文件
.pipe(gulp.dest("dist/js/"))//将bundle.js输出到指定目录
.pipe(uglify())//将代码压缩
.pipe(rename({suffix:".min"}))//设置压缩文件的后缀名，// suffix 后缀名 .min ，也可以不传入一个json，而是直接传入一个文件名，例如bundle.min.js
.pipe(gulp.dest("dist/js/"))//将压缩文件输出到指定目录
.pipe(livereload())
.pipe(connect.reload())
})
//注册less编译事件
gulp.task("less",function(){
return gulp.src("less/*.less")
.pipe(less())//将less文件编译为css文件
.pipe(gulp.dest("css/"))//将文件输出到css目录，便于和css文件一起压缩
.pipe(livereload())
.pipe(connect.reload())
})
//注册css事件
gulp.task("css",["less"],function(){
return gulp.src("css/*.css")
.pipe(concat("build.css"))
.pipe(cleanCss({compatibility:"ie8"}))//cleanCss方法进行代码压缩，并且传入参数 compatibility ，能够让代码的压缩适应ie8
.pipe(rename("build.min.css"))
.pipe(gulp.dest("dist/css/"))
.pipe(livereload())
.pipe(connect.reload())
})
//注册半自动监听事件
gulp.task("watch",["default"],function(){//传入参数default
//开启监听
livereload.listen();
//确认监听的目标以及绑定相应的任务
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"]);
})
//注册全自动监听事件
gulp.task("server",["default"],function(){
//配置服务器选项
//gulp-connect会提供一个微型的服务器，执行之后会自动读取所有文件，然后提供一个服务器地址，访问即可
connect.server({
root:"dist/",//服务器根目录
livereload:true,//实时刷新
port:6565,//端口
})
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"])
})
//设置默认任务
gulp.task("default",["js","less","css"]);
在每个事件后执行加载：
.pipe(connect.reload())
在终端中执行:
gulp server
为了便于测试可以在dist目录下创建一个index.html，并且引入压缩之后的css和js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/build.min.css">
</head>
<body>
<div class="index">哈哈哈</div>
</body>
</html>
打开浏览器，输入 http://localhost:6565 即可访问
在dist目录创建index的html，进入到http://localhost:6565 会自动打开此页面，把index改成别的名字就不会，此时打开一个微型服务器页面。
自动打开页面
下载open插件：
npm install open --save-dev
引入下插件后，在代码最后传入要访问的地址：
//首先将插件引入
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect");
var open = require("open");
//注册js事件
//由于gulp基于流的构建方式，其方法调用可写为链式调用
gulp.task("js",function(){//在回调函数中return返回数据
return gulp.src("js/*.js")//将文件读取到gulp的内存空间中
//js/*.js 获取到js目录下的所有js文件
.pipe(concat("bundle.js"))//将读取到的js文件合并代码到bundle.js文件
.pipe(gulp.dest("dist/js/"))//将bundle.js输出到指定目录
.pipe(uglify())//将代码压缩
.pipe(rename({suffix:".min"}))//设置压缩文件的后缀名，// suffix 后缀名 .min ，也可以不传入一个json，而是直接传入一个文件名，例如bundle.min.js
.pipe(gulp.dest("dist/js/"))//将压缩文件输出到指定目录
.pipe(livereload())
.pipe(connect.reload())
})
//注册less编译事件
gulp.task("less",function(){
return gulp.src("less/*.less")
.pipe(less())//将less文件编译为css文件
.pipe(gulp.dest("css/"))//将文件输出到css目录，便于和css文件一起压缩
.pipe(livereload())
.pipe(connect.reload())
})
//注册css事件
gulp.task("css",["less"],function(){
return gulp.src("css/*.css")
.pipe(concat("build.css"))
.pipe(cleanCss({compatibility:"ie8"}))//cleanCss方法进行代码压缩，并且传入参数 compatibility ，能够让代码的压缩适应ie8
.pipe(rename("build.min.css"))
.pipe(gulp.dest("dist/css/"))
.pipe(livereload())
.pipe(connect.reload())
})
//注册半自动监听事件
gulp.task("watch",["default"],function(){//传入参数default
//开启监听
livereload.listen();
//确认监听的目标以及绑定相应的任务
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"]);
})
//注册全自动监听事件
gulp.task("server",["default"],function(){
//配置服务器选项
//gulp-connect会提供一个微型的服务器，执行之后会自动读取所有文件，然后提供一个服务器地址，访问即可
connect.server({
root:"dist/",//服务器根目录
livereload:true,//实时刷新
port:6565,//端口
})
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"])
//设置访问路径
open("http://localhost:6565/01.html")
//也能打开外部网址,而且可以同时打开多个
// open("http://www.baidu.com");
// open("http://www.taobao.com");
})
//设置默认任务
gulp.task("default",["js","less","css"]);
此时在终端输入gulp server后，会自动打开传入的地址。
