a 、css打包规范
constcssHandler=function(){
returngulp.src('./src/css/*.css')
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'))
}
注意:1,先添加前缀,再执行打包
2,设定浏览器兼容版本,在package.json中设定
"browserslist":[
"last2versions",
"IOS>7",
"FireFox>20"
]
b 、 js打包规范
constjsHandler=function(){
returngulp.src('./src/js/*.js')
.pipe(babel({presets:['@babel/env']}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
}
注意:1,babel({presets:['@babel/env']})以对象的形式定义参数
2,先将其他语法规范,转化为ES5语法规范,再执行打包压缩
c 、 html打包压缩规范
consthtmlHandler=function(){
returngulp.src('./src/pages/*.html')
.pipe(htmlmin({
removeAttributeQuotes:true, //删除属性上的双引号
removeComments:true, //删除注释内容
collapseBooleanAttributes:true, //删除布尔属性的属性值
collapseWhitespace:true, //删除标签之前的空格
minifyCSS:true, //压缩html文件中的css程序
minifyJS:true, //压缩html文件中的js程序
//虽然可以压缩HTML中的js和css,但是压缩执行的不完美
//实际项目中,不要有内部,js和css,都要写成外部文件形式
}))
.pipe(gulp.dest('./dist/pages'))
}
注意:1,htmlmin()中以对象的形式定义参数
d 、图片等不需要打包压缩的,就直接移动至dist文件夹
constimgHandler=function(){
returngulp.src('./src/images/*.*')
.pipe(gulp.dest('./dist/images'))
}
e,设定服务器执行规范调用执行打包压缩好的文件
constwebserverHandler=function(){
returngulp.src('./dist')//指定的是运行文件的目录,也就是要运行的压缩的文件,所在的文件夹
.pipe(webserver({
host:'127.0.0.1',//主机域名,当前就是127.0.0.1或者localhost
port:'8080',//定义监听端口
livereload:true,//执行热启动,如果程序代码,改变,自动刷新页面,不用重启服务器,不用手动刷新页面
open:'./pages/index.html',//默认打开的网页,输入127.0.0.1:8080地址就会直接打开的页面
//默认的地址是,gulp.src()设定的文件夹位置,也就是默认是dist压缩文件夹所在的位置,执行的也是压缩之后的文件
}))
}
注意:1,gulp.src('./dist')设定执行的打包压缩文件,存储的文件夹路径
2,open设定服务器启动之后,执行的默认页面
设定相对路径的起始位置,是gulp.src()设定的文件夹位置
3,livereload:true,热启动页面样式等更新,不用手动刷新,服务器会自动刷新
f、制定sass的编译打包压缩规范
constsassHandler=function(){
returngulp.src('./src/sass/*.scss')
.pipe(sass())//将sass编译为css
.pipe(autoprefixer())//之后就是执行css的打包压缩规范
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'))
}
设定监听程序
a,设定删除规范,也就是每次执行新的打包压缩之前,先删除原始的打包内容
constdelHandler=function(){
returndel(['./dist']);
}
b,设定监听规范,指定监听的文件文件夹,如果出现修改,会自动重新打包压缩
constwatchHandler=function(){
gulp.watch('./src/css/*.css',cssHandler);
gulp.watch('./src/js/*.js',jsHandler);
gulp.watch('./src/pages/*.html',htmlHandler);
gulp.watch('./src/images/*.*',imgHandler);
}
注意:1,gulp.watch()第一个参数是,监听的文件夹文件路径
gulp.watch()第二个参数是,监听文件内容发生改变时,执行的打包规范
2,必须要定义的打包规范的函数名称
c,设定导出默认执行程序
module.exports.default=gulp.series(
delHandler,
gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler),
webserverHandler,
watchHandler,
)
注意:1,设定module.exports.default之后,再执行gulp,只要在路径下输入gulp就可以了
2,gulp.series()按照顺序执行设定的程序,顺序必须正确
gulp.parallel()是同时执行所有设定的程序
顺序一定是:先删除之前打包压缩的文件
在重新压缩所有需要打包压缩,移动的文件
开启服务器
执行监听