大家好，欢迎来到IT知识分享网。

what is gulp?

/*
gulp是前端自动化打包构建工具
==> 打包：就是把文件压缩，整合，移动，混淆

前端打包构建工具:
gulp: 基于流的打包构建工具
webpack: 基于js文件的打包构建工具

什么是流?
    流文件： 流
        => 一种文件传输的格式
        => 一段一段的文件传输
    流格式： 流
        => 从头到尾的一个过程
        => 需要从源头开始，一步一步经过加工，每一步骤需要上一步结果，最终得到结果
    gulp基于流格式的一种打包构建工具

gulp的依赖环境
    依赖node的环境进行开发
    底层封装的内容就是node里面的读写文件
    
gulp的作用
    对于css文件
        => 压缩
        => 转码(自动添加前缀)
    对于js文件
        => 压缩
        => 转码(ES6转ES5)
    对于html文件
        => 压缩
        => 转码(对格式的转换)
    对于静态资源
    对于第三方文件
    ...

gulp的安装
    https://www.gulpjs.com.cn/docs/getting-started/quick-start/
    验证： gulp --version

gulp的卸载
    npm uninstall --global gulp
*/

gulp使用

/* gulp使用: 1.全局安装gulp => 提供gulp命令的功能 2.项目依赖gulp => 可以在gulpfile.js文件中写gulp的构建代码 1.新建项目目录如下： 1.npm init -- 生成package.json,记录依赖内容 2.gulp_test + src -- 源码目录 + css -- 样式文件 + js -- javascript文件 + images -- 图片 + pages -- 页面 + gulpfile.js -- gulp文件,写项目打包流程的 2.在项目中再安装gulp,是以依赖的方式出现 => 提供配置打包流程API => 每个项目都要安装一次 => 输入命令: npm install gulp 3.在gulpfile.js中书写打包流程 */ /* package.json dependencies => 表示项目依赖 => 比如vue, jquery => 指运行需要用到的内容,将来上线也需要使用的 devDependencies => 项目开发依赖 => 比如gulp => 项目开发阶段需要用到的内容，将来上线以后不需要用到 => npm install --dev 包名(gulp) */

gulp常用api

/*
1.gulp.task()
语法: gulp.task("任务名称", 任务处理函数)
作用: 创建一个基于流的任务
例子: gulp.task('htmlHandler', function() {
    // 找到html文件, 压缩，打包 放入指定目录
})

2.gulp.src()
语法: gulp.src(路径信息)
作用: 找到源文件
例子: 
    1.gulp.src("./a/b.html")
    2.gulp.src("./a/*.html")
    3.gulp.src("./a/**") 指定目录下所有文件
    4.gulp.src("./a/**\/*") 指定a目录下所有子目录里面的所有文件

3.gulp.dest()
语法: gulp.dest(路径信息)
作用: 把内容放入指定路径内
例子: 
    1.gulp.dest("./abc")  -- 把内容放入到abc目录下

4.gulp.watch()
语法: gulp.watch(路径信息, 任务名称)
作用: 监控指定目录下的文件, 发生变化就执行后面的任务
例子: 
    1.gulp.dewatchst("./abc/*.html", 'htmlHandler')

5.gulp.series()
语法: gulp.series(任务1, 任务2, 任务3, ...)
作用: 逐个执行多个任务，前一个任务结束才执行后面的任务

6.gulp.parallel()
语法: gulp.parallel(任务1, 任务2, 任务3, ...)
作用: 并行开始多个任务

7.pipe()
=> 管道函数
=> 所有api基于流, 所以该api就是接收当前流，进入下一个流程过程
=> gulp.src().pipe(压缩).pipe(转码).pipe(gulp.desc('dist'))
*/

gulp插件

/*
gulp常用插件
    作用: 执行各种各样的压缩，混淆，转码任务

1.gulp-cssmin
    => npm install gulp-cssmin -D
    => 引入：const cssmin = require('gulp-cssmin')

2.gulp-autoprefixer
    => npm install gulp-autoprefixer -D
    => 作用: 自动添加前缀
    => 引入: const autoprefixer = require('gulp-autoprefixer')
    => 引入后得到一个处理流文件的函数,直接在管道内使用传递参数即可
    => autoprefixer( browsers: ['last 3 version'] ) -- 主流浏览器最新三个版本

3.gulp-sass
    => npm install gulp-sass -D
    => 很容易报错,基本下载不成功
    => 因为gulp-sass依赖node-sass, node-sass下载容易失败
    => 解决: 给node-sass配置一个单独的下载地址
        1.set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
        2.npm install node-sass -D
        3.npm install gulp-sass -D
    => const sass = require('gulp-sass')

4.gulp-uglify
    => npm install gulp-uglify -D
    => 作用: 压缩js文件
    => 引入: const uglify = require('gulp-uglify')
    => 引入后得到一个函数,直接在管道中使用即可

5.gulp-babel
    => 版本
        -> gulp-babel@7 -- gulp@3
        -> gulp-babel@8 -- gulp@4
    => npm install gulp-babel -D
        -> 依赖： @babel/core, @babel/preset-env
        -> npm install @babel/core -D
        -> npm install @babel/preset-env -D
    => 作用: ES6 转 ES5插件
    => 引入: const babel = require('gulp-babel')
    => 引入后得到一个函数,直接在管道中,需要传递参数. 
    => babel({ presets: ['@babel/env'] }) -- babel@7, presets: ['es2015']

6.gulp-htmlmin
    => npm install gulp-htmlmin -D
    => 作用: 删除文件目录
    => 引入: const htmlmin = require('gulp-htmlmin')
    => 引入后得到一个函数,直接使用传递参数即可.
    htmlHandler({
        collapseWhitespace: true, // 移除空格
        removeEmptyAttributes: true, // 移除空的属性(仅限于原生属性)
        collapseBooleanAttributes: true, // 移除checked类似的布尔值属性
        removeAttributeQuotes: true, // 移除属性上的双引号
        minifyCSS: true, // 压缩内嵌css代码(只能压缩，不能添加前缀)
        minifyJS: true, // 压缩内线JS代码(只能压缩，不能转码)
        removeStyleLinkTypeAttributes: true, // 移除style 和 link 标签上的type属性
        removeScriptTypeAttributes: true, // 移除script标签上的type属性
    })

7.del
    => npm install del -D
    => 安装指定版本: npm install del@6.0.0 -D
    => 作用: 删除文件目录
    => 引入: const del = require('del')
    => 引入后得到一个函数,直接使用传递参数即可
    
    
8.gulp-webserver (https://www.npmjs.com/package/gulp-webserver)
    => npm install gulp-webserver -D
    => 作用: 启动一个基于node的服务器
    => 引入: const del = require('gulp-webserver')
    => 引入后得到一个可以处理流文件函数,在管道函数中调用接口
    function webServer() {
        return gulp.src('./dist').pipe(webserver({
            host: 'localhost', // 域名
            port: 8080,
            livereload: true, // 热加载
            path: './pages/index.html', // 默认打开一个文件(从dist目录开始写)
            open: true, // 自动打开
        }))
    }

9.gulp-file-include
    => 作用: 在一个html页面中导入一个html片段
    => npm install gulp-file-include
    => 引入: const fileInclude = require('gule-file-include')
    => 引入后得到一个函数,直接在管道中使用即可，需要传递参数

*/


/*
// gulp3的写法
const gulp = require("gulp")
// 导入一个css的打包任务
const cssmin = require('gulp-cssmin')
gulp.task('cssHandler', function() {
    return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
})
*/

/*
// gulp4的写法
const cssmin = require('gulp-cssmin')
function cssHandler() {
    return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
}
module.exports.cssHandler = cssHandler;
*/

/*
想要执行上面的任务
1.打开命令行,切换到gulpfile.js文件所在目录
2.执行命令: gulp cssHandler
*/

gulp创建默认任务

/*
由于在基于gulp构建项目的时候，需要执行多个任务，比如压缩css，压缩html，转换js等多个任务.我们可以配置默认任务
配置默认任务作用就是把所有任务都一起执行了
执行gulp命令, 默认会执行默认的任务

方式1：
gulp.task('default', () => {})

方式2:
module.exports.default = () => {
    cssHandler();
    jsHandler();
    htmlHandler();
    ...
}
*/

gulp启动服务器

/* gulp基于node环境的工具 所以gulp可以启动一个基于node的服务器 启动服务器基于dist目录来做根目录 原因：所有的文件都会被打包到dist目录 以下代码通过gulp webServer启动web服务器 */ const webserver = require('gulp-webserver') function webServer() { return gulp.src('./dist').pipe(webserver({ host: 'localhost', // 域名 port: 8080, livereload: true, // 热加载 path: '/', open: true, // 自动打开浏览器 // 可配多个代理 proxies: [ { source: '/kk', target: 'https://tenapi.cn/douyinresou/' } ] })) }

gulp监控任务

function watchHandler() { gulp.watch('./src/css/*.css', cssHandler) } // 使用gulp watchHandler启动监控任务

gulp打包组件

/*
场景：
    => 将重复的东西单独拿出来，写成一个html片段
    => 单独拿出来的东西可以包含css和js
        -> 也可以不包含

*/
const htmlmin = require('gulp-htmlmin')
const fileInclude = require('gulp-file-include')
function htmlHandler() {
    return gulp.src('./src/pages/*.html')
        .pipe(fileInclude({
            prefix: '#-#', // 自定义的一个标识符
            basepath: './src/components', // 基准目录，即组件目录
        }))
        .pipe(htmlmin({
        collapseWhitespace: true, // 移除空格
        removeEmptyAttributes: true, // 移除空的属性(仅限于原生属性)
        collapseBooleanAttributes: true, // 移除checked类似的布尔值属性
        removeAttributeQuotes: true, // 移除属性上的双引号
        minifyCSS: true, // 压缩内嵌css代码(只能压缩，不能添加前缀)
        minifyJS: true, // 压缩内线JS代码(只能压缩，不能转码)
        removeStyleLinkTypeAttributes: true, // 移除style 和 link 标签上的type属性
        removeScriptTypeAttributes: true, // 移除script标签上的type属性
    })).pipe(gulp.dest('./dist/pages'))
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/login.js"></script>
</head>
<body>
    <!--
        在html中引入方式为:
        语法: 自定义标识符include('要导入的组件文件路径')
    -->
    #-#include('./header.html', { title: '登录页面' })
    <h1>hello world</h1>
    #-#include('./footer.html')
</body>
</html>

<!-- header组件 -->
<div>
    <h1>
        #-#title <!-- 此处就可以引用到上面的title的值 -->
    </h1>
    header
</div>

<!-- footer组件 -->
<div>
    footer
</div>

gulp的demo

const gulp = require("gulp")

const cssmin = require('gulp-cssmin')
// gulp.task('cssHandler', function() {
//     // 如果需要捕获到该任务的流结束，task就会处理流任务
//     return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
// })

function cssHandler() {
    return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
}

function jsHandler() {
    return gulp.src('./src/js/*.js').pipe(gulp.dest('./dist/js'))
}

const htmlmin = require('gulp-htmlmin')
const fileInclude = require('gulp-file-include')
function htmlHandler() {
    return gulp.src('./src/pages/*.html')
        .pipe(fileInclude({
            prefix: '#-#', // 自定义的一个标识符
            basepath: './src/components', // 基准目录，即组件目录
        }))
        .pipe(htmlmin({
        collapseWhitespace: true, // 移除空格
        removeEmptyAttributes: true, // 移除空的属性(仅限于原生属性)
        collapseBooleanAttributes: true, // 移除checked类似的布尔值属性
        removeAttributeQuotes: true, // 移除属性上的双引号
        minifyCSS: true, // 压缩内嵌css代码(只能压缩，不能添加前缀)
        minifyJS: true, // 压缩内线JS代码(只能压缩，不能转码)
        removeStyleLinkTypeAttributes: true, // 移除style 和 link 标签上的type属性
        removeScriptTypeAttributes: true, // 移除script标签上的type属性
    })).pipe(gulp.dest('./dist/pages'))
}

function watchHandler() {
    gulp.watch('./src/css/*.css', cssHandler)
}

const webserver = require('gulp-webserver')
function webServer() {
    return gulp.src('./dist').pipe(webserver({
        host: 'localhost', // 域名
        port: 8080,
        livereload: true, // 热加载
        path: '/', // 默认打开一个文件(从dist目录开始写)
        open: true,
        // 可配多个代理
        proxies: [
            {
                source: '/kk',
                target: 'https://tenapi.cn/douyinresou/'
            }
        ]
    }))
}

const del = require('del')
function delHandler() {
    // 不需要流.直接删除即可
    return del(['./dist/'])
}

module.exports.default = gulp.series(delHandler, gulp.parallel(cssHandler, htmlHandler, jsHandler), webServer, watchHandler)