gulp是一个利用“流”实现自动化的工具。就像官方文档首页展示的动画一样，以“流动”的状态处理TypeScript、PNG、Markdown资源。对比webpack类webpackgulp核心概念模块bundlertaskrunner执行任务模块化定义任务等待执行build模式loader文件Stream支持插件√√gulp比webpack更简单易用，更适合一些自动化任务（比如如Jquery、编译文件上传到服务器等），但默认不支持模块化，所以大型项目（Vue、React、Angle）不会使用它。执行任务安装依赖和webpack一样，gulp可以全局安装，也可以在项目本地安装，这里通过npminstallgulp只安装在当前项目的配置文件中webpack中默认的配置文件是webpack.config.js，而gulp中默认配置的文件是gulpfile.js，在根目录下创建一个文件，定义一个函数，并导出，里面定义了一个简单的任务。constfoo=()=>{console.log('foo');};module.exports={foo,};编译文件执行npxgulpfoo命令编译任务，跟随函数名foo的gulp告诉要执行的任务名称，但是此时编译会报错，提示任务还没有完成了，你是不是忘了发送一个异步任务完成的信号？，事件发射器，子进程或可观察类型接受回调作为参数，调用回调函数并结束任务这里使用第二种方法constfoo=(cb)=>{console.log('foo');cb();};再次执行npxgulpfoo。此时编译成功，执行时间为2.59ms。在默认任务上执行上述命令时，gulp后面跟着任务名称foo。如果不跟名字，则执行默认任务，需要在gulpfile.js中导出默认任务Taskmodule.exports.default=(cb)=>{console.log('defaulttask');cb();};此时可以看到输出的默认任务是串行和并行的。当有多个任务需要合并时，可以使用gulp提供的方法，series表示串行，parallel表示并行。const{系列，并行}=require('gulp');consttask1=(cb)=>{setTimeout(()=>{console.log('task1');cb();},2000);};consttask2=(cb)=>{setTimeout(()=>{console.log('task2');cb();},2000);};consttask3=(cb)=>{setTimeout(()=>{console.log('task3');cb();},2000);};constseriesTask=series(task1,task2,task3);constparallelTask=parallel(task1,task2,task3);module.exports={seriesTask,parallelTask??,};Serial会等待上一个任务执行完成后再执行下一个任务。任务的完成时间是所有任务的总和，parallel会把所有任务一起执行。阅读文件并聆听。在项目的src文件夹下定义index.js文件。gulp暴露的src()和dest()方法用于处理存储在计算机上的文件。const{src,dest}=require('gulp');consttask=()=>{returnsrc('src/*.js').pipe(dest('dist'));};module.exports={任务，};此时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');constbabel=require('gulp-babel');constterser=require('gulp-terser');consttask=()=>{returnsrc('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',任务);使用watch后，编译不会结束。每当被监控的文件被修改和保存时，都会重新编译。综上所述，gulp主要以“流”的方式处理资源，没有模块化，不适合大型项目。Gulp每次处理时都会启动异步任务，并且可以并行化、序列化和监视资源更新。使用插件，gulp还可以实现代码转换、压缩等功能。以上就是gulp的介绍。更多关于前端和工程的内容可以参考我的其他博文，持续更新中~
