共计 2489 个字符,预计需要花费 7 分钟才能阅读完成。
gulp 是一个应用“流”来实现自动化的工具,正如 官网文档 首页展现的这副动图一样,以“流动”的状态去解决 TypeScript、PNG、Markdown 资源。
与 webpack 比拟
类别 | webpack | gulp |
---|---|---|
核心理念 | module bundler | task runner |
执行工作 | 模块化 | 定义工作、期待执行 |
构建形式 | loader | 文件 Stream |
反对插件 | √ | √ |
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 告知执行的工作名称
但此时编译会报错,揭示工作没有实现,是否遗记了发送异步工作实现的信号
异步工作
这是因为默认状况所有工作是异步的,想要完结有两种形式
- 返回固定的内容,stream、promise、event emitter、child process 或 observable 类型
- 承受一个 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
的介绍,更多无关 前端
、 工程化
的内容能够参考我其它的博文,继续更新中~