gulp.js - 基于流(stream)的自动化构建工具

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。

什么是流

流文件：一种文件传输格式，一段一段的文件传输

流格式：从头到尾的一个过程

依赖环境

依赖于nonde环境开发

底层封装内容就是node里面读写文件

gulp的作用

对于css文件的压缩、转码(自动添加前缀)，对于js压缩、转码(ES6转ES5)，对于html文件压缩、转码(对格式的转换)，对于静态资源文件的处理，对于第三方文件的处理

gulp安装与协助

全局安装gulp工具，一次安装永久使用。gulp 全局安装完毕后，能给你的电脑提供一个启动gulp的环境

# 安装
npm install --global gulp
# 卸载
npm uninstal --global gulp

gulp 的版本

gulp@3 => 安装成功检测版本号，gulp 3.9.1

gulp@4 => 安装成功检测版本号，gulp cli 2.3.0

gulp的使用

1、确定自己的目录结构，将源码和打包后的内容分为两个文件夹

2、准备一个gulpfile.js文件，gulp进行打包依据

3、在项目里面再次安装gulp，注意：项目里面的gulp是以第三方模块的形式出现的

npm install gulp --dev

4、在gulpfile.js里面书写配置文件，项目可以执行gulp指令运行gulpfile.js文件

gulp的常用API

gulp.task()

=> 语法： gulp.task(任务名称,任务处理函数)

=> 作用： 创建一个基于流的任务

gulp.task(‘htmlHandeler，function (){
 // 找到html源文件，进行压缩，打包，放置到指定目录
})

gulp.src()

=> 语法：gulp.src(路径信息)

=> 作用：找到源文件

// 指定一个文件
gulp.src('./a/b.html')
// 匹配目录下的所有html文件
gulp.src('./a/*.html')
// 匹配目录下的所有文件
gulp.src('./a/**')
// 匹配所有子目录下的子文件
gulp.src('a/** /*')

gulp.dest()

=> 语法：gulp.dest(路径信息)

=> 作用：把一个内容放入指定目录内

// 把接收到的内容放到abc目录下
gulp.dest('./abc')

gulp.watch()

=> 语法：gulp.dest(路径信息,任务名称)

=> 作用：监控指定目录下的文件，一旦发生变化，从新执行后面的任务

// 当指定目录下的html文件发生变化，就会执行htmlHandler这个任务
gulp.watch('./src/pages/*.html',htmlHandler)

gulp.series()

=> 语法：gulp.series(任务1,任务2,任务3, ... ）

=> 作用：逐个执行多个任务，前一个任务结束，第二个任务开始 ...

gulp.parallel()

=> 语法：gulp.parallel(任务1,任务2,任务3, ... ）

=> 作用：并行开始多个任务

pipe()

=> 管道函数

=> 所有的gulp API都是基于流

=> 接收当前流，进入下一个流的管道函数

// 利用管道执行一个接着一个的任务
gulp.src(’./test‘).pipe(压缩任务).pipe(转码)

gulp常用插件

gulp-cssmin

=> 作用：压缩css文件

=> 下载： npm i gulp-cssmin -D

=> 导入： const cssmin = require('gulp-cssmin')

=> 导入以后得到一个处理流文件的函数

=> 直接在管道函数里执行

gulp-autoprefixer

=> 作用：css添加浏览器兼容性前缀

=> 下载： npm i gulp-autoprefixer -D

=> 导入： const autoprefixer= require('gulp-autoprefixer')

=> 导入以后得到一个处理流文件的函数

=> 直接在管道函数里执行，需要传递参数

{
    "browserslist": [
        "last 2 versions",
        "FireFox < 20",
        "ios < 7"
     ]
}
//  配置参考地址
//  https://github.com/browserslist/browserslist#readme
//  https://twitter.com/browserslist

  # 配置报错信息
  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config can
  be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

gulp-less

=> 下载： npm i gulp-less -D

=> 作用：转码less

gulp-sass

=> 下载： npm i gulp-sass -D

=> 作用：转码sass

gulp-uglify

=> 下载： npm i gulp-uglify -D

=> 作用：把js文件压缩

=> 导入： const uglify= require('gulp-uglify')

=> 导入以后得到一个处理流文件的函数

=> 直接在管道函数里执行

=> 注意：你不能写es6语法，一旦有了es6语法就会报错

gulp-babel

=> 下载：需要提前下载它需要依赖的@babel/core @babel/preset-env,然后再安装 gulp-babel

# 分开下载
npm i @babel/core -D
npm i @babel/preset-env -D
npm i gulp-babel -D
# 统一下载
npm i  @babel/core  @babel/preset-env gulp-babel -D

=> 作用：把js文件压缩

=> gulp-babel 的版本 gulp-babel@7: 大部分是由 gulp@3， gulp-babel@8: 大部分是由 gulp@4

=> 导入： const babel = require('gulp-babel ')

=> 导入以后得到一个处理流文件的函数

=> 直接在管道函数里执行

gulp-htmlmin

=> 下载： npm i gulp-htmlmin -D

=> 作用：压缩html文件

=> 导入： const htmlmin= require('gulp-htmlmin')

=> 导入以后得到一个处理流文件的函数

=> 直接在管道函数里执行，需要传递参数

gulp-imagemin(不推荐使用)

=> 下载： npm i gulp-imagemin -D，需要非常好的网络环境

=> 作用：图片无损压缩

=> 导入： const imagemin= require('gulp-imagemin')

=> 导入以后得到一个处理流文件的函数

=> 直接在管道函数里执行

del

=> 下载： npm i del -D

=> 作用：删除问题目录

=> 导入： const del= require('del')

=> 导入以后得到一个函数

=> 传递函数直接执行

gulp-webserver

=> 下载： npm i gulp-webserver -D

=> 作用：启动一个基于node书写的服务器

const webServerHandler = function(){
  return gulp
    .src('./dist')
    .pipe(webServer({
      host: 'localhost', // 域名
      port: '8080', // 端口号
      livereload: true, // 当文件修改时,是否自动刷新
      open: './pages/index.html', // 默认打开文件, 从dist往后书写
      proxies: [
        {
          // 代理标识符
          source: '/dt',
          // 代理目标地址
          target: 'https://www.duitang.com/'
        }
      ]
      // 配置代理数据服务器,如果没有代理不要写空对象
    }))
}

gulp-file-include

作用：再一个HTML页面里面导入一个HTML片段

=>下载： npm i gulp-file-include -D

=>导入：const fileInclude = require('gulp-file-include')

=>导入以后得到一个处理流文件的函数

=> 直接在管道函数里执行，需要传递参数

gulp打包组件

把重复的位置单独拿出来，写成一个html片段

单独拿出来的片段可以包含css和js

当我压缩html的时候，能再固定位置把我写的html片段引入进来

使用gulp-file-include插件

<!-- 模板 -->
<!-- 自定义类名 -->
<header class="@-@show">
  <!-- 渲染自定义变量 -->
  @-@title
</header>

<!-- 标识符include(模板路径,JSON对象)  -->
@-@include('./header.html',{title:'登录页'，show:'active'})

// 根据你的配置导入对应的HTML片段
fileInclude({
  prefix: '@-@', // 自定义标识符
  basepath: './src/components',// 基准目录,你的组件文件夹在那
})

gulpfile.js

gulp@3 标准写法

gulp.task('cssHandler',function () {
  return gulp
    .src('./src/css/*.css') // 找到源文件
    .pipe(cssmin()) // 执行压缩任务
    .pipe(gulp.dest('./dist/css/')) // 放到指定目录下
}) 

gulp@4 标准写法，需要在gulpfile.js文件里面导出

const cssHandler = function(){
  return gulp
    .src('./src/css/*.css') // 找到源文件
    .pipe(cssmin()) // 执行压缩任务
    .pipe(gulp.dest('./dist/css/')) // 放到指定目录下
}

module.exports.cssHandler = cssHandler

/* gulpfile.js */

/**
 * @Version 1.0.0
 * @Author ZhenYuTsai
 * @Descripttion 整个项目的打包配置流程
 * @Date 2021-07-05 11:09:12
 */
const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
const less = require('gulp-less')
const autoprefixer = require('gulp-autoprefixer')
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')
const htmlmin = require('gulp-htmlmin')
const del = require('del')
const webServer = require('gulp-webserver')
const fileInclude = require('gulp-file-include')

// 创建一个打包css的任务
const cssHandler = function(){
  return gulp
    .src('./src/css/*.css') // 找到源文件
    .pipe(autoprefixer()) // 自动添加css前缀
    .pipe(cssmin()) // 执行压缩任务
    .pipe(gulp.dest('./dist/css/')) // 放到指定目录下
}

// 创建一个打包less的任务
const lessHandler = function(){
  return gulp
    .src('./src/less/*.less') // 找到源文件
    .pipe(less()) // 转换成css
    .pipe(autoprefixer()) // 自动添加css前缀
    .pipe(cssmin()) // 执行压缩任务
    .pipe(gulp.dest('./dist/less/')) // 放到指定目录下
}

// 创建一个打包js的任务
const jsHandler = function(){
  return gulp
    .src('./src/js/*.js') // 找到源文件
    .pipe(babel({ presets: ['@babel/env'] })) // 转换成es5
    .pipe(uglify()) // 执行压缩任务
    .pipe(gulp.dest('./dist/js/')) // 放到指定目录下
}

// 创建一个打包html的任务
const htmlHandler = function(){
  return gulp
    .src('./src/pages/*.html') // 找到源文件
    .pipe(fileInclude({
      prefix: '@-@', // 自定义标识符
      basepath: './src/components',// 基准目录,你的组件文件夹在那
    }))// 根据你的配置导入对应的HTML片段
    .pipe(htmlmin({
      removeComments: true, // 清除HTML注释
      collapseWhitespace: true, // 表示移除空格和换行
      removeEmptyAttributes: true, // 表示移除空的属性(仅限于原生属性)
      collapseBooleanAttributes: true, // 移除Boolean类型的多余值
      removeAttributeQuotes: true, // 移除属性单一值的双引号
      minifyCSS: true, // 压缩内嵌式css(只能基本压缩不能添加前缀)
      minifyJS: true, // 压缩内嵌式js(只能基本压缩不能转码)
      removeStyleLinkTypeAttributes: true, // 移除style标签和link标签的type属性
      removeScriptTypeAttributes:true, // 移除script标签上的type属性
    })) // 执行压缩任务
    .pipe(gulp.dest('./dist/pages/')) // 放到指定目录下
}

// 创建一个打包assets的任务(视频等其他无需压缩的资源是同样的方式)
const assetsHandler = function(){
  return gulp
    .src('./src/assets/**/*') // 找到源文件
    .pipe(gulp.dest('./dist/assets/')) // 放到指定目录下
}

// 创建删除原先的打包文件夹
const delHandler = function(){
  return del('./dist')
}

// 创建一个启动服务器的任务
const webServerHandler = function(){
  return gulp
    .src('./dist')
    .pipe(webServer({
      host: 'localhost', // 域名
      port: '8080', // 端口号
      livereload: true, // 当文件修改时,是否自动刷新
      open: './pages/index.html' // 默认打开文件, 从dist往后书写
    }))
}

// 创建一个监控任务
const watchHandler = function(){
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/less/*.less', lessHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/pages/*.html', htmlHandler)
  gulp.watch('./src/components/*.html', htmlHandler)
  gulp.watch('./src/assets/**/*', assetsHandler)
}

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