关于前端:gulp使用指南

gulp 是一个应用“流”来实现自动化的工具，正如 官网文档 首页展现的这副动图一样，以“流动”的状态去解决 TypeScript、PNG、Markdown 资源。

与webpack比拟

gulp 相比 webpack 思维会更加简略、易用，更适宜一些自动化工作（比方Jquery、编译文件上传到服务器等性能），但它默认不反对模块化，所以大型的我的项目（Vue、React、Angle）并不会应用它。

执行工作

装置依赖

和 webpack 一样，gulp 能够全局装置，也能够在我的项目部分装置，这里通过 npm install gulp 仅在以后我的项目装置

配置文件

webpack 中默认的配置文件为 webpack.config.js，而 gulp 中默认配置文件为 gulpfile.js，根目录创立文件，定义一个函数，将它导出，这就定义了一个简略的工作。

const foo = () => {  console.log('foo');};module.exports = {  foo,};

编译文件

执行 npx gulp foo 命令编译工作，在 gulp 前面跟上函数名 foo 告知执行的工作名称

但此时编译会报错，揭示工作没有实现，是否遗记了发送异步工作实现的信号

异步工作

这是因为默认状况所有工作是异步的，想要完结有两种形式

1. 返回固定的内容，stream、promise、event emitter、child process 或 observable 类型
2. 承受一个 callback 作为参数，调用 callback 函数工作完结

这里应用第二种形式

const foo = (cb) => {  console.log('foo');  cb();};

再次执行 npx gulp foo，此时编译胜利，执行工夫 2.59ms

默认工作

下面执行命令时，gulp 前面跟了工作名称 foo，如果不跟名称时，执行的是默认工作，须要在 gulpfile.js 中导出默认工作

module.exports.default = (cb) => {  console.log('default task');  cb();};

此时能够看到输入默认工作

串行并行

当存在多个工作须要进行组合时，能够通过 gulp 提供的办法，series 示意串行，parallel 示意并行。

const { series, parallel } = require('gulp');const task1 = (cb) => {  setTimeout(() => {    console.log('task1');    cb();  }, 2000);};const task2 = (cb) => {  setTimeout(() => {    console.log('task2');    cb();  }, 2000);};const task3 = (cb) => {  setTimeout(() => {    console.log('task3');    cb();  }, 2000);};const seriesTask = series(task1, task2, task3);const parallelTask = parallel(task1, task2, task3);module.exports = {  seriesTask,  parallelTask,};

串行会等上一个工作执行实现，再执行下一个，工作的实现工夫为所有工作的总和，并行就会将所有工作一起执行。

读取文件、监听

在我的项目的 src 文件夹下定义 index.js 文件，通过 gulp 裸露的 src() 和 dest() 办法用于解决计算机上寄存的文件。

const { src, dest } = require('gulp');const task = () => {  return src('src/*.js').pipe(dest('dist'));};module.exports = {  task,};

此时src文件夹下的 index.js 文件被读取到 dist 文件夹下

此时的 js 代码没有做 es6 - es5 的转化，也没有压缩，想要达到这些成果，须要应用 gulp 的插件，别离是 gulp-babel 和 gulp-terser，定义形式和 webpack 中 babel 和 terser是统一的，不太理解 babel 和 terser 的敌人能够点链接查看。

需注意，应用 gulp-babel 须要装置 babel 的外围库 @babel/core 以及指定编译规定用到的预设 @babel/preset-env 或者其它插件。

const { src, dest } = require('gulp');const babel = require('gulp-babel');const terser = require('gulp-terser');const task = () => {  return src('src/*.js')    .pipe(babel({ presets: ['@babel/preset-env'] }))    .pipe(terser({ mangle: { toplevel: true } }))    .pipe(dest('dist'));};module.exports = {  task,};

通过 pipe() 解决完资源返回一个“流”文件交给下一个插件解决，此时 dist 文夹下的 index.js 资源就进行了代码转换和压缩。

webpack 在编译的时候提供了 --watch 属性，当源码资源发生变化时，主动从新编译，gulp 也提供这样的性能，应用 watch() 来实现。

const { watch } = require('gulp');watch('src/*.js', task);

应用 watch 后，编译不会完结，每当监听的文件批改并保留时，从新编译。

总结

• gulp 次要以“流”的形式来解决资源，没有模块化，不适宜大型项目。
• gulp 每次解决即开启异步工作，能够并行、串行、监听资源的更新。
• 应用插件，gulp 也能实现代码转化、压缩等性能。

以上就是 gulp 的介绍， 更多无关 前端、工程化 的内容能够参考我其它的博文，继续更新中~