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后，会自动打开传入的地址。