Gulp基本使用安装>npminstallgulp-ggulp配置文件：gulpfile.jsgulp4.0不再推荐使用gulp.task()，而是以exports的方式定义任务：exports.foo=done=>{done()//标记任务完成}组合配置const{series,parallel}=require('gulp')consttask1=done=>{setTimeout(()=>{console.log('task1working~')done()},1000)}consttask2=done=>{setTimeout(()=>{console.log('task2working~')done()},1000)}consttask3=done=>{setTimeout(()=>{console.log('task3working~')done()},1000)}//让多个task依次执行exports.foo=series(task1,task2,task3)//让多个task同时执行exports.bar=parallel(task1,task2,task3)异步任务constfs=require('fs')exports.callback=done=>{console.log('callbacktask')done()}exports.callback_error=done=>{console.log('callbacktask')done(newError('taskfailed'))}exports.promise=()=>{console.log('promise任务')returnPromise.resolve()}exports.promise_error=()=>{console.log('promisetask')returnPromise.reject(newError('taskfailed'))}consttimeout=time=>{returnnewPromise(resolve=>{setTimeout(resolve,time)})}//Nodejs版本8以上可以使用async,awaitexports.async=async()=>{awaittimeout(1000)console.log('asynctask')}//最常用的一个，读写文件exports.stream=()=>{constread=fs.createReadStream('yarn.lock')constwrite=fs.createWriteStream('a.txt')read.pipe(write)//导入文件流returnread//结束任务}//exports.stream=done=>{//constread=fs.createReadStream('yarn.lock')//constwrite=fs.createWriteStream('a.txt')//read.pipe(write)//read.on('end',()=>{//结束任务//done()//})//}构建流程核心工作原理input=>processing=>outputconstfs=require('fs')const{Transform}=require('stream')exports.default=()=>{//文件读取流constreadStream=fs.createReadStream('normalize.css')//文件写入流constwriteStream=fs.createWriteStream('标准化.min.css')//文件转换流consttransformStream=newTransform({//核心转换过程transform:(chunk,encoding,callback)=>{constinput=chunk.toString()constoutput=input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')callback(null,output)}})returnreadStream.pipe(transformStream)//transform.pipe(writeStream)//write}文件操作APIconst{src,dest}=require('gulp')constcleanCSS=require('gulp-clean-css')constrename=require('gulp-rename')exports.default=()=>{returnsrc('src/*.css').pipe(cleanCSS())//压缩css代码plugin.pipe(rename({extname:'.min.css'}))//重命名文件plugin.pipe(dest('dist'))}Gulp基本配置准备安装gulp工具：npminstallgulp-g创建gulp配置：在项目根目录新建文件gulpfile.js，用于编写gulp配置文件；任务：清除文件功能：清除组件产生的所有文件依赖：delconstclean=()=>{returndel(['dist','temp'])}任务：css文件处理，sass文件转换函数：转换sass文件写入css文件并写入指定目录dependency:gulp-sassconststyle=()=>{returnsrc('src/assets/styles/*.scss',{base:'src'})//base指定基目录,转换后dist目录将保持与src.pipe(plugins.sass({outputStyle:'expanded'}))//{outputStyle:'expanded'}参数可以指定结束括号格式。pipe(dest('temp'))}任务：JS文件处理，编译es6+转es5功能：使用babel插件将js文件中的es6+代码转为es5依赖：1.gulp-babel=>babeltool:convert平台不做具体工作2、@babel/core=>babel核心转换模块：完成语言转换工作3、@babel/preset-env=>babel转换插件：指定babel对应的转换内容；例如，env包含了es6+的所有新特性，将其转换为es5constscript=()=>{returnsrc('src/assets/scripts/*.js',{base:'src'}).pipe(plugins.babel({presets:['@babel/preset-env']//编译es6，必须传入参数preset-env，否则会转换失败（babel的配置可以单独放在.babelrc文件中）})).pipe(dest('temp'))}任务：转换html文件，处理swig模板功能：将指定的swig模板转换成html文件，注意：1.配置gulp时，可以将数据传给对象形式的模板引擎；通常在文件中定义数据：pages.config.js2，可以关闭swig模板的缓存配置，防止热更新时浏览器没有实时刷新依赖：gulp-swigconstpage=()=>{returnsrc('src/**/*.html',{base:'src'})//其中/**/*.html表示src目录中的任何子目录匹配目录.pipe(plugins.swig({data:config.data,defaults:{cache:false}}))//转换模板页面，将data数据传递给模板使用，cache：swig缓存设置，否则热更新可能无法生效立即地.pipe(dest('temp'))}任务：图片压缩，减小图片尺寸功能：压缩图片尺寸依赖：gulp-imageminconstimage=()=>{returnsrc('src/assets/images/**',{base:'src'}).pipe(plugins.imagemin()).pipe(dest('dist'))}任务：字体文件压缩，减小字体文件大小功能：压缩字体大小依赖：gulp-imageminconstfont=()=>{returnsrc('src/assets/fonts/**',{base:'src'}).pipe(plugins.imagemin()).pipe(dest('dist'))}任务：其他文件移动，如视频功能：将所有其他文件移动到指定目录依赖：Noneconstextra=()=>{returnsrc('public/**',{base:'public'}).pipe(dest('dist'))}Gulp的本地服务/热更新/文件合并压缩任务：本地web服务和热更新功能一：本地web服务1、使用插件browser-sync启动本地web服务，并支持一些配置（具体参考Samplecode）2.重要配置：根路径baseDir，配置完成后，gulpwill从指定路径依次搜索sync插件的配置使用files:'temp/**'来监控目录下的所有文件功能三：源文件热更新1.监控源文件，如果源文件修改，立即rebuild2.开发模式下：监控范围不包括图片、字体等文件，将其访问路径指定为src路径，可以提高构建效率dependency:browser-syncconstserve=()=>{//监控src文件并重建代码watch('src/assets/styles/*.scss',style)watch('src/assets/scripts/*.js',script)watch('src/*.html',page)//开发阶段不需要重新执行图片和字体的构建任务；所以让gulp从源文件src和public//bs.reload中搜索当图像、字体和其他文件发生变化时更新浏览器。watch(['src/assets/images/**','src/assets/fonts/**','public/**'],bs.reload)//配置web服务器并监控distbs.init({notify:false,//右上角提示port:2080,//服务端口，默认300//open:false,//自动打开浏览器files:'temp/**',//热更新,当dist下的所有文件发生变化时，同步更新浏览器以及图片、字体等文件的重建（减少构建时间），让gulp从源文件src和public中搜索baseDir:['temp','src','public'],routes:{//路径搜索route'/node_modules':'node_modules'//优先级高于baseDir，先搜索node_modules目录}}})}任务：文件合并压缩混淆功能1：文件合并useef插件查询指定路径，然后对应的文件合并功能n2：文件压缩1、压缩js2、压缩css3、压缩html依赖：1、gulp-useref=>查询路径、合并文件2、gulp-if=>判断条件插件3、gulp-uglify=>压缩js4,gulp-clean-css=>压缩css5,gulp-htmlmin=>压缩htmlconstuserref=()=>{returnsrc('temp/*.html',{base:'temp'}).pipe(plugins.useref({searchPath:['temp','.']}))//查询路径：dist,.root目录(node_modules)//htmljscss压缩代码.pipe(plugins.if(/\.js$/,plugins.uglify())).pipe(plugins.if(/\.css$/,plugins.cleanCss())).pipe(plugins.if(/\.html$/,plugins.htmlmin({collapseWhitespace:true,//折叠空白字符minifyCSS:true,//自动compressthecssinthestyleminifyJS:true//自动压缩脚本中的js//同时删除注释、空属性等//...}))).pipe(dest('dist'))}Gulp配置构建任务的类别如何对任务进行分组？对组合任务使用并行/串行；其中parallel为并行执行，series为Gulp构建任务串行执行的范畴1.基础构建：只构建css、js、html，用于本地测试constcompile=parallel(style,script,page)2.开发方式：basic构建+启动web服务+热更新（图片/字体等文件使用src在本地加速构建）//2.开发方式：只构建各种代码，启动web服务，使用图片/字体等文件src在本地加速upthebuildconstdevelop=series(clean,compile,serve)3.生产模式：执行所有任务；包括合并/压缩各种文件，然后处理图片/文件constbuild=series(clean,parallel(series(compile,useef),extra,image,font))其他配置，简化配置，提升定制化1.自动加载所有插件功能：避免引入太多常用插件，直接使用插件代替；例如：需要用plugins.sass变量替换sass。依赖：gulp-load-plugins//constsass=require('gulp-sass')//npminstallgulp-sass--save-dev//==>//自动加载所有插件；例如sass，使用plugins.sass可以替换成constloadPlugins=require('gulp-load-plugins')//npminstallgulp-load-plugins--save-devconstplugins=loadPlugins()将原来的变量替换成plugins.xxxattribute.pipe(sass({outputStyle:'expanded'}))//==>.pipe(plugins.sass({outputStyle:'expanded'}))2.模板数据可以配置：1.定义模板引擎需要的数据在：pages.config.js中，使用gulpfile.js中的默认配置2.gulpfile.js中的所有路径都可以用变量替换，实现更高程度的自定义依赖：noletconfig={//默认配置构建：{src:'src',dist:'dist',temp:'temp',public:'public',paths:{styles:'assets/styles/*.scss',scripts:'assets/scripts/*.js'，页面：'*.html'，图像：'assets/images/**'，字体：'assets/fonts/**'}}}try{constloadConfig=require(`${cwd}/pages.config.js`)config=Object.assign({},config,loadConfig)}catch(e){}数据文件：pages.config.jsmodule.exports={build:{src:'src',dist:'release',temp:'.tmp',public:'public',paths:{styles:'assets/styles/*.scss',脚本：'assets/scripts/*.js'，页面：'*.html'，图像：'assets/images/**'，字体：'assets/fonts/**'}}，数据：{菜单：[{name:'Home',icon:'aperture',link:'index.html'},...],pkg:require('./package.json'),date:newDate()}}配置Npm脚本，启动构建任务：1.导出任务：gulpfile.js文件中的exportsmodule.exports={clean,build,develop}2.配置脚本：在文件package.json中配置对应的任务执行脚本"scripts":{"clean":"gulpclean","build":"gulpbuild","develop":"gulpdevelop"}，特别鸣谢：拉勾教育前端高薪训练营
