const {src,dest,parallel,series,watch}=require('gulp')
const loadPlugins=require('gulp-load-plugins')
const plugin=loadPlugins()//实现自动下载依赖
// const plugin.sass=require('gulp-sass')
// //js转换还要下这两个依赖@babel/core @babel/preset-env
// const plugin.bebel=require('gulp-babel')
// const plugin.swig=require('gulp-swig')
// const plugin.img=require('gulp-imagemin')
const delDist =require('del')
const browserSync=require('browser-sync')
const { use } = require('browser-sync')
//创建一个开发服务器
const bs=browserSync.create()
const style=()=>{
return src('src/assets/styles/*.scss',{base:'src'}) //以src为基础目录,保持原有目录结构输出
// 转换scss文件,会忽略_开头的文件
.pipe(plugin.sass()) //转换css文件
.pipe(dest('temp'))
//或者使用以流的方式推进浏览器也行
.pipe(bs.reload({stream:true}))
}
const script=()=>{
return src('src/assets/scripts/*.js',{base:'src'})
.pipe(plugin.babel({presets:['@babel/preset-env']}))
.pipe(dest('temp'))
.pipe(bs.reload({stream:true}))
}
const html=()=>{
return src('src/**/*.html',{base:'src'})
.pipe(plugin.swig({cache:false})) //传入要模板引擎要
.pipe(dest('temp'))
.pipe(bs.reload({stream:true}))
}
const image=()=>{
return src('src/assets/images/**',{base:'src'})
.pipe(plugin.imagemin()) //图片压缩
.pipe(dest('dist'))
}
const font=()=>{
return src('src/assets/fonts/**',{base:'src'})
.pipe(plugin.imagemin()) //图片压缩
.pipe(dest('dist'))
}
const extra=()=>{//处理src之外的其余文件
return src('public/**',{base:'public'})
.pipe(dest('dist'))
}
const clean=()=>{
return delDist(['dist','temp'])
}
const useref=()=>{
return src('temp/*.html')
.pipe(plugin.useref({searchPath:['dist','.']}))
//压缩html,css,和js gulp-htmlmin gulp-uglify gulp-clean-css
//读取流中不止一种文件,gulp-if可以用来判断是哪种文件的流
.pipe(plugin.if(/\.js$/g,plugin.uglify()))
.pipe(plugin.if(/\.css$/g,plugin.cleanCss()))
.pipe(plugin.if(/\.html$/g,plugin.htmlmin({
collapseWhitespace:true,//折叠空白字符
minifyCss:true,//压缩内部的css
minifyJs:true
})))
.pipe(dest('dist'))//如果写入和读取都是dist,会产生冲突,需要区分
}
const serve=()=>{
//第一个参数是监控对应的路径,当这个路径下的文件产生变化时,自动触发对应的任务
watch('src/assets/styles/*.scss',style)
watch('src/assets/scripts/*.js',script)
watch('src/**/*.html',html)
// 开发时,热更新检测并压缩这些文件,开销很大,没有必要
// watch('src/assets/images/**',image)
// watch('src/assets/fonts/**',font)
// watch('public/**',extra)
watch(
[
'src/assets/images/**',
'src/assets/fonts/**',
'public/**'
],//这些文件更新后,触发对这个文件的重新请求
bs.reload
)
bs.init({
notify:false,//页面上的打开时出现的小提示的关闭
port:3459,//指定端口
open:true,//自动打开浏览器
// files:'dist/**',//哪些文件修改会自动更新
//或者使用以流的方式推进浏览器也行
server:{
baseDir:['temp','src','public'], //指定网页文件资源地址,从前往后一次找
routes:{//查找文件时,替换目录地址,开发时设置就行
'/node_modules':'node_modules'
}
}
})
}
const compile=parallel(style,script,html)
const build=series(
clean,
parallel(
series(compile,useref),
image,
font,
extra
)
)
const develop=series(compile,serve)
module.exports={
clean,
build,
develop,
}
gulp打包的配置文件
最新推荐文章于 2022-07-01 22:16:49 发布