写在前面：
因为gulp是一个基于node的工具，所以我们需要先安装node，具体可见【node的安装及配置】
一、gulp简介
gulp 是一个基于node的自动化打包构建工具，前端开发者可以使用它来处理常见任务：
- 搭建web服务器；
- 文件保存时自动重载浏览器；
- 使用预处理器如Sass、LESS；
- 优化资源，比如压缩CSS、JavaScript、压缩图片；
- 类似Gulp的工具，我们通常称之为构建工具或者叫自动化构建工具；
- 强调的是前端开发的流程，通过配置一系列的task，定义task处理的事物，然后定义执行顺序，来让Gulp执行task，从而构建前端项目的流程，说白了就是用来打包项目；
- 基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度；
- 不管做什么功能，都有一个统一的接口进行管理，必须去注册一个任务，然后去执行，这也是它的特点之一，即“任务化”。
二、gulp基本使用
1. 创建项目
① 创建项目目录，结构如下（注：项目名称不可使用gulp）：
例：
② 打开命令行工具：（注：package.json文件为npm init –y自动创建，切勿手动创建）
- 使用
cd命令进入项目目录，如：cd mygulp - 创建项目配置文件：
npm init -y - 此时项目目录如下：
例：
2. gulp的安装
在命令行工具，依次执行：
① 全局安装：npm i gulp -g
② 局部安装：npm i gulp -D
③ 检测安装版本：gulp -v
注： gulp -v 命令得到两个版本号，一个全局，一个局部，代表安装成功
此时项目结构如下：
例：
3. gulp配置文件
在项目中创建gulp配置文件 --> gulpfile.js
此时项目结构如下：
例：
4. 定义指令
在gulpfile.js文件中定义gulp指令，使用gulp实现功能。
const gulp = require("gulp"); // 引入gulp模块
function testFn(){ // 准备指令功能
console.log("test");
}
exports.test = testFn; // 定义指令（暴露模块）
三、gulp常用插件
以下插件使用格式为：npm（空格）i（空格）插件名（空格）-D
清空文件夹：gulp-clean
编译css：gulp-sass
压缩图片：gulp-imagemin
深度压缩图片：imagemin-pngquant
压缩css：gulp-cssmin
css前缀：gulp-autoprefixer
压缩js：gulp-uglify
ES6转ES5：gulp-babel
套件1：@babel/core
套件2：@babel/preset-env
压缩html：gulp-htmlmin
服务器插件：gulp-webserver
文件重命名：gulp-rename
合并js文件：gulp-concat
四、gulp常用项目流程操作及部分插件使用方法
- 开始之前先引入将来要使用到的插件模块
例：
const gulp = require("gulp");
const cssmin = require("gulp-cssmin");
const autoprefixer = require("gulp-autoprefixer");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const htmlmin = require("gulp-htmlmin");
const webserver = require("gulp-webserver");
- css处理方式
例：
// 处理css的指令：压缩，添加兼容前缀
function cssFn(){
return gulp.src("./project/css/**/*")
.pipe(autoprefixer("last 2 version","safari 5","ie 8","ie 9","opera 12.1","ios 6","android 4"))
.pipe(cssmin())
.pipe(gulp.dest("./server/css"))
}
module.exports.css = cssFn; // module.可省略
- js处理方式
例：
// 处理js的指令：ES6编译ES5，压缩
function jsFn(){
return gulp.src("./project/js/**/*")
.pipe(babel({
presets:["@babel/env"]
}))
.pipe(uglify())
.pipe(gulp.dest("./server/js"))
}
exports.js = jsFn;
- html处理方式
例：
// 处理html的指令：压缩
function htmlFn(){
return gulp.src("./project/pages/**/*")
.pipe(htmlmin({
removeEmptyAttributes:true,
collapseWhitespace:true
}))
.pipe(gulp.dest("./server/pages"))
}
exports.html = htmlFn;
- 处理静态资源
例：
function staticFn(){
// 找到要处理的静态资源文件
return gulp.src("./src/static/**")
// 直接转存
.pipe(gulp.dest("./dist/static"))
}
// 暴露调用方式
exports.static = staticFn;
- 删除文件夹
例：
function cleanFn(){
// 找到要删除的文件目录
return gulp.src("./ded")
// 直接删除
.pipe(clean())
}
// 暴露调用方式
exports.clean = cleanFn;
- 服务器配置
例：
function serverFn(){
// 找到要指定为根目录的文件夹
return gulp.src("./ded")
// 执行服务器方式，并开始配置信息
.pipe(webserver({
// 指定访问地址
host:"localhost",
// 指定端口
port:3000,
// 开启自动刷新
livereload:true,
// 服务器开启后，自动打开的页面
open:"./pages/index.html",
proxies:[{
// 代理之后的请求地址
source:"./chapters",
// 被代理的跨域地址
target:"http://wanandroid.com/wxarticle/chapters/json"
}]
}))
}
// 暴露调用方式
exports.server = serverFn;
- 开启监听
例：
function watchFn(){
// 监听所有css文件
gulp.watch("./src/css/**",cssFn);
// 监听所有js文件
gulp.watch("./src/js/**",jsFn);
// 监听所有html文件
gulp.watch("./src/pages/**",htmlFn);
// 监听所有static文件
gulp.watch("./src/static/**",staticFn);
}
// 暴露调用方式
exports.watch = watchFn;
- 批量执行
注意：
gulp.series()：同步执行内部命令
gulp.parallel()：异步执行内部命令
例：
exports.all = gulp.series(
gulp.parallel(cssFn,jsFn,htmlFn,staticFn),
gulp.parallel(serverFn,watchFn)
);
【附：gulp 官网：gulp官网 (内附众多中文网链接，请尽情“食用”)】
