当前位置: 首页 > 后端技术 > Node.js

Gulp4.0升级注意事项

时间:2023-04-03 14:49:24 Node.js

前言周日在公司新电脑上在之前的gulp3.9配置目录下按npminstall时,发现报错。百度了一下发现gulp已经到4.0版本了,于是升级了一点时间。顺便写下我个人使用的新版本配置文件的不同之处,文笔水平有限,还望见谅1.新Api介绍//v3.9letgulp=require('gulp');//v4.0const{series,src,dest,watch}=require('gulp');//新引入的src、dest可以替代旧的gulp.src和gulp.dest,代码更简洁//watch是任务监控//系列是任务按顺序执行2.新的任务创建方法//让imagemin=require('gulp-imagemin');//v3.9gulp.task('imagemin',()=>{gulp.src('/path').pipe(imagemin()).pipe(gulp.dest('/path'))})//4.0functionminImage(){returnsrc('/path').pipe(imagemin()).pipe(dest('/path'))}//新版本使用function和return来设置任务,函数名不能和导入的插件变量名相同3.执行方法//v3.9gulp.task('default',[task1,task2])//v4.0,taskFn为设置任务的函数名functiondefaultTask(){returnseries(taskFn1,taskFn2,taskFn3);//series允许任务按顺序执行}export.default=defaultTask()//输出控制台执行任务的名称//新版本的export.xxxx,这个xxxx是控制台中gulp执行任务的名称,可以同时导出设置多个任务//比如export.dev=dev(),如果要执行dev函数返回的任务,在控制台输入gulpdev添加回车!,如果export.build=build(),在控制台输入gulpbuild,回车!,如果是export.default=default(),直接输入gulp回车,等等4.watch和系列Api//v3.9,老版本好像需要安装队列插件才能执行任务为了让watch=require('gulp-watch');gulp.task('watch',()=>{gulp.watch(['filePath1','filePath2'],[task1,task2]);});//4.0const{watch,series}=require('咕噜咕噜');functionwatchTask(){//注意这里不需要returnwatch(['filePath1','filePath2'],series(taskFn1,taskFn2,taskFn3));}//新版本直接引入了watch来实现task监控功能,无需安装插件//系列也可以配合watch按顺序执行设定的任务功能5.插件gulp-autoprefixer配置变更//v3.9.pipe(autoprefixer({browsers:['last2versions'],cascade:false}))//v4.0,需要在package.json文件中添加browserslist键名或者在根目录下添加一个.browserslistrc文件来配置gulp-autoprefixer//详情请参考:https://github.com/browserslist/browserslist#queries.pipe(autoprefixer())//.browserslistrcfilelast1version>1%maintainednodeversionsnotdead//package.json"browserslist":["last1version",">1%","maintainednodeversions","notdead"]其他配置感觉新版和老版差不多,不过暂时找了这么多,亲测可用。-webkit-box-orient:vertical;will0.0自动删除这个样式,折腾了好久,找到解决方法如下-webkit-line-clamp:3;/*!auto??prefixer:innorenext*/2020-02-26update-webkit-box-orient:vertical;overflow:hidden;2020-02-26更新:1.修复gulp-px3rem(px2rem)插件生成的css文件名变成xxx.debug.css的问题(1)找到node_modules依赖gulp-px3rempackage文件夹中的文件夹(2)进入文件夹后修改index.js路径中第46行和第60行的代码:file.path.replace(/(.debug)?.css$/,dpr+'x.debug.css'),改路径:file.path.replace(/(.debug)?.css$/,dpr+'.css'),60路径:file.path.replace(/(.debug)?.css$/,'.debug.css')topath:file.path.replace(/(.debug)?.css$/,'.css')(3)重启服务2.关于解决方案使用gulp-px3rem(px2rem)后1px边框无法正常显示,在css语句后添加/*no*/忽略该语句。选择器{border:1pxsolid#fff;/*no*/}3.个人使用px2rem方法1.在gulefile.js的px2rem配置中设置remUnit为设计稿的宽度,默认为75px2rem({remUnit:750//remUnit表示rem转换比例,当前值为750表示1rem=750px})2.设置html的字体大小为屏幕大小,下面是限制页面的最大宽度window.onload=function(){让windowWidth=document.documentElement.clientWidth;document.documentElement.style.fontSize=(windowWidth>750?750:windowWidth)+'px';}3.设计稿是多少px,CSS是多少px?我个人的gulp4.0.2配置,希望大家多多指教!