什么是gulp

gulp基于node平台开发的前端构建工具

它可以帮助我们解决一些机械性的操作任务
如：

压缩文件
文件格式转换 md->html
语法转换 es5->es6
抽取公共文件
等等等等

1. 安装gulp

命令：nmp install gulp
项目架构：

gulpfile.js -用于编写gulp命令的文件
src -放置源码文件目录
dist -放置转换之后的文件目录

2. gulp提供的方法

gulp.task() 构建glup任务
gulp.src() 获取要处理的文件
gulp.dest() 输出文件
gulp.watch() 监控文件的变化

栗子：

const gulp = require("gulp");

// 第一个demo任务
gulp.task('first', (done) => {
    gulp.src('./src/text01.html')
        .pipe(gulp.dest('dist/'));
    done();
});
//task方法的第一个参数是自定义的任务名，第二参为回调参数。
//done()表示该任务执行完毕

//gulp.src() 参数为要操作文件路径
//所有的操作方法要写在pipe()里面，如上面作为参数
//gulp.dest() 要将操作完成后的文件输出到哪

怎么执行呢？
执行该任务不是去用node命令解析执行，而是要借助一个新的命令。

下载该命令行工具：
安装gulp命令行 npm install gulp-cli -g
然后：在命令行，命令gulp first便可执行该first任务

3. gulp常用插件

3.1 重命名

插件安装命令：npm install gulp-rename
使用：

const rename = require("gulp-rename");
gulp.task('rename', (done) => {
    gulp.src('./src/text01.html')
        .pipe(rename("newFlie/newText01.html"))//输出到了dist/newFlie文件下新名字newText01.html
        .pipe(gulp.dest('dist/'));
    done();
});

3.2 抽取公共部分

插件安装命令: npm install gulp-file-include
使用：

const common = require("gulp-file-include");
// 提取公共部分
gulp.task("common", done => {
    gulp.src("./src/text03.html").pipe(common()).pipe(gulp.dest("./dist/newText03.html"));
    console.log("转换完成");
    done();
});

text03.html文件下内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    @@include("./common.html")//抽离
    <div>内容</div>
</body>

</html>

common.html内容：

<div>这是一个头部</div>

dist文件目录下的转换完成之后的：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>这是一个头部</div>
    <div>内容</div>
</body>

</html>

3.3 压缩代码

压缩html：
插件安装命令：npm install gulp-htmlmin
使用：

const htmlmin = require("gulp-htmlmin");
// 压缩代码
gulp.task("htmlmin", done => {
    gulp.src("./src/text02.html")
        .pipe(htmlmin({ collapseWhitespace: true }))//里面参数意思是说是否压缩空格
        .pipe(gulp.dest("./dist"));
    done();
});

压缩css：
插件安装命令：npm install gulp-csso

const csso = require("gulp-csso");
//压缩css文件
gulp.task("csso", done => {
    gulp.src("./src/text01.css").pipe(csso()).pipe(gulp.dest("./dist/css"));
    done();
});

值得注意：js文件的压缩目前支持的是es5语法，代码里面有es6便会报错。所以我放到下面语法转换部分了

3.4 转换less文件

插件安装命令：npm install gulp-less
使用：

const less = require("gulp-less");
gulp.task("less", done => {
    gulp.src("./src/text01.less").pipe(less()).pipe(gulp.dest("./dist"));
    done();
});

3.5 es5转es6并压缩js文件

插件安装命令：
语法转换插件命令npm install --save-dev gulp-babel @babel/core @babel/preset-env
js压缩插件命令npm install gulp-uglify
使用：

const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
//es转es5并压缩
gulp.task('jsmin', (done) => {
    gulp.src('./src/text01.js')
        .pipe(babel({
            // 自动判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
    done();
});

3.6 md文件转html

插件安装命令：npm install gulp-markdown
使用：

const markdown = require('gulp-markdown');
//将md文件转为html
gulp.task("mdToHtml", done => {
    gulp.src("./src/read.md").pipe(markdown()).pipe(gulp.dest("./dist/md"));
    done();
});

3.7 多任务执行

上面的任务要一个个运行太过繁琐，故gulp为我们提供一个一个方法可以用一个命令执行所有任务

使用：

//任务打包
gulp.task('default', gulp.series(["htmlmin", "jsmin"], (done) => {
    console.log("执行成功");
    done();
}));

gulp.series()方法里面传两个参数，一个参数是你要执行任务的数组，一个回调
注意的是原来是不需series这个方法的，数组和回调可以放在task里面直接做参数。但是gulp最新做了规定，原来的写法已经不可再用了只能这样写了