// gulp 配置文件
// 0. 导入第三方
// 0-1. 导入 gulp
const gulp = require('gulp')
// 0-2. 导入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 0-3. 导入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 0-4. 导入 gulp-sass
const sass = require('gulp-sass')
// 0-5. 导入 gulp-uglify
const uglify = require('gulp-uglify')
// 0-6. 导入 gulp-babel
const babel = require('gulp-babel')
// 0-7. 导入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 0-8. 导入 del
const del = require('del')
// 0-9. 导入 gulp-webserver
const webserver = require('gulp-webserver')
// 0-10. 导入 gulp-file-include
const fileInclude = require('gulp-file-include')
// 1. 创建任务
// 1-1. 创建一个打包 css 的任务
const cssHandler = function () {
return gulp
.src('./src/css/*.css') // 1. 找到内容
.pipe(autoPrefixer()) // 2. 自动添加前缀
.pipe(cssmin()) // 3. 压缩
.pipe(gulp.dest('./dist/css/')) // 4. 放到指定目录
}
// 1-2. 创建一个打包 sass 文件的任务
const sassHandler = function () {
return gulp
.src('./src/sass/*.scss')
.pipe(sass())
.pipe(autoPrefixer())
.pipe(cssmin())
.pipe(gulp.dest('./dist/sass/'))
}
// 1-3. 创建一个打包 js 文件的任务
const jsHandler = function () {
return gulp
.src('./src/js/*.js') // 1. 找到 js 文件
.pipe(babel({
// babel@7, presets: ['es2015']
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'))
}
// 1-4. 创建一个打包 html 文件的任务
const htmlHandler = function () {
return gulp
.src('./src/pages/*.html')
// .pipe(fileInclude({ // 根据你的配置导入对应的 html 片段，也就是组件
// prefix: '@-@', // 你自定义的一个标识符
// basepath: './src/components' // 基准目录, 你的组件文件都在哪一个目录里面
// }))
.pipe(htmlmin({ // 通过你配置的参数来进行压缩
// collapseWhitespace: true, // 表示移出空格
removeEmptyAttributes: true, // 表示移出空的属性(仅限于原生属性)
collapseBooleanAttributes: true, // 移出 checked 类似的布尔值属性
removeAttributeQuotes: true, // 移出属性上的双引号
minifyCSS: true, // 压缩内嵌式 css 代码(只能基本压缩, 不能自动添加前缀)
minifyJS: true, // 压缩内嵌式 JS 代码(只能基本压缩, 不能进行转码)
removeStyleLinkTypeAttributes: true, // 移出 style 和 link 标签上的 type 属性
removeScriptTypeAttributes: true, // 移出 script 标签上默认的 type 属性
}))
.pipe(gulp.dest('./dist/pages/'))
}
// 1-5. 创建一个打包 images 文件的任务
const imgHandler = function () {
return gulp
.src('./src/images/**')
.pipe(gulp.dest('./dist/images/'))
}
// 1-6. 创建一个打包 videos 文件的任务
const videoHandler = function () {
return gulp
.src('./src/videos/**')
.pipe(gulp.dest('./dist/videos/'))
}
// 1-7. 创建一个打包 audios 文件的任务
const audioHandler = function () {
return gulp
.src('./src/audios/**')
.pipe(gulp.dest('./dist/audios/'))
}
// 1-8. 创建一个打包 第三方 的任务
const libHandler = function () {
return gulp
.src('./src/lib/**/*')
.pipe(gulp.dest('./dist/lib/'))
}
// 1-9. 创建一个打包 fonts 文件的任务
const fontHandler = function () {
return gulp
.src('./src/fonts/**/*')
.pipe(gulp.dest('./dist/fonts/'))
}
// 1-10. 创建一个删除 dist 目录的任务
const delHandler = function () {
// del 直接执行就可以了, 不需要流
// 参数以数组的形式传递你要删除的文件夹
return del(['./dist/'])
}
// 1-11. 创建一个启动 服务器 的任务
const webHandler = function () {
return gulp
.src('./dist')
.pipe(webserver({
host: 'www.gx.com', // 域名(可以配置自定义域名)
port: '8080', // 端口号
livereload: true, // 当文件修改的时候, 是否自动刷新页面
open: './pages/login.html', // 默认打开哪一个文件(从 dist 目录以后的目录开始书写)
proxies: [ // 配置你的所有代理
// 每一个代理就是一个对象数据类型
// 注意: 如果你没有代理, 不要写空对象
{
// 代理标识符
source: '/dzm1',
// 代理目标地址
target: 'https://www.dzm.com/api/'
},
{
source: '/dzm2',
target: 'https://www.xyq.com/api/'
},
{
source: '/dzm3',
target: 'https://www.xxx.com/api/'
}
]
}))
}
// 1-12. 创建一个监控任务
const watchHandler = function () {
// 使用 gulp.watch()
gulp.watch('./src/sass/*.scss', sassHandler)
gulp.watch('./src/css/*.css', cssHandler)
gulp.watch('./src/js/*.js', jsHandler)
gulp.watch('./src/pages/*.html', htmlHandler)
}
// 2. 导出任务（这种单个导出需要单个执行）
// 2-1. 导出打包 css 的任务
// module.exports.cssHandler = cssHandler
// // 2-2. 导出打包 sass 的任务
// module.exports.sassHandler = sassHandler
// // 2-3. 导出打包 js 的任务
// module.exports.jsHandler = jsHandler
// // 2-4. 导出打包 html 的任务
// module.exports.htmlHandler = htmlHandler
// // 2-5. 导出打包 images 的任务
// module.exports.imgHandler = imgHandler
// // 2-6. 导出打包 videos 的任务
// module.exports.videoHandler = videoHandler
// // 2-7. 导出打包 audios 的任务
// module.exports.audioHandler = audioHandler
// // 2-8. 导出打包 第三方 的任务
// module.exports.libHandler = libHandler
// // 2-9. 导出打包 fonts 的任务
// module.exports.fontHandler = fontHandler
// // 2-10. 导出删除 dist 目录的任务
// module.exports.delHandler = delHandler
// 3. 配置一个默认任务
// 默认任务的作用就是把所有的任务一起执行了
// 要么使用 gulp.series(), 要么使用 gulp.parallel()
// 这两个方法的返回值是一个函数, 返回值可以直接被当作任务函数使用
// 使用 task 的方式创建一个 default 任务
// 方式1:
// gulp.task('default', () => {})
// 方式2:
// module.exports.default = () => {}
// 举例：创建一个默认任务（这种就可以一起执行，不需要单个导出执行）
// module.exports.default = gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imgHandler, videoHandler, audioHandler, libHandler, fontHandler)
// 配置一个默认任务
// 这个是完整的流程：1、删除dist 2、创建压缩到dist 3、启用本地代理（也可以使用 nginx 代替）4、热更新监听文件变化进行编译
module.exports.default = gulp.series(
delHandler,
gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imgHandler, videoHandler, audioHandler, libHandler, fontHandler),
webHandler,
watchHandler
)
