前言：
这里是封装一个完美的gulpfile.js文件.
// 在 gulpfile.js 文件中来定义压缩规范
// gulp的功能基本介绍
// 在gulp中,也就是导入了gulp依赖包之后,具有的gulp的方法
//
// 1, src() 用来找需要打包的源文件的方法
// 基本语法 gulp.src('要打包文件的路径') 路径是从当前 gulpfile 文件起始的相对路径
//
// 2, pipe() 用来执行操作的方法,将我们要写的操作,定义在()中
// 基本语法 gulp.pipe(你要做的操作)
//
// 3, dest() 写入文件内容的方法,将设定的内容,写入到指定路径的指定文件中
// 如果文件不存在会自动建立相应的文件
// 基本语法 gulp.dest(路径)
//
// 4, watch() 用来监听文件变化的方法
// 当文件内容变化时,会自动执行你规定的程序
// 基本语法 gulp.watch(你要监听的文件目录,你要执行的任务)
// 5, parallel() 同时执行所有任务 , 所有任务一起执行
// 基本语法 gulp.parallel(任务1,任务2....)
// 6, series() 逐个执行所有任务 , 执行完上一个任务,再执行下一个任务
// 基本语法 gulp.parallel(任务1,任务2....)
// 基本步骤
// 1, 加载导入 第三方依赖包
// const 变量 = require(依赖包)
// 2, 指定规范 , 所谓的规范是函数的形式
// function 方法名称(){}
// const 方法名称 = funciton(){}
// 3, 导出指定好的规范,给其他程序执行
// module.exports.名称 = 方法名称
// 一,导入依赖包
// 1,1 导入gulp依赖包
// 会先在项目作用域中找gulp,如果找到,就执行项目作用域中的gulp
// 如果没有就去全局作用域找gulp
// 现在项目中有gulp,就使用项目中的gulp
const gulp = require('gulp');
// 1,2 导入打包css依赖包
const cssmin = require('gulp-cssmin');
// 1,3 css添加兼容前缀的依赖包
const autoprefixer = require('gulp-autoprefixer');
// 1,4 js的依赖包 --- 只能打包 ES5 语法
const uglify = require('gulp-uglify');
// 1.5 gulp-babel 和 @babel/core 和 @babel/prest-env
// 这三个 依赖包 来配合 gulp-uglify
// 将 ES6等语法格式,转化为ES5的语法格式,然后来打包压缩
// 加载导入依赖包的时候,只需要导入 gulp-babel 就可以了
// 另外两个会一起自动导入加载
const babel = require('gulp-babel');
// 1.6 html打包规范第三方依赖包 gulp-htmlmin
const htmlmin = require('gulp-htmlmin');
// 1.7 del 删除文件方法
const del = require('del');
// 1.8 webserver 搭建服务器方法
const webserver = require('gulp-webserver');
// 二,设定打包规范,也就是函数
// 2-1,设定css的打包规范
const cssHandler = function(){
// 以返回值的形式来定义操作
// 可以用链式编程的方式来定义,也可以换行写
// 找到文件
// return 是定义这个打包规范的执行结果 , 如果没有return 函数的执行结果是 undefined
// 返回的是一连串操作的最终结果
// 先按照路径找文件,添加css兼容前缀,在打包压缩,最后写入执行文件夹,生成压缩之后的css文件
return gulp.src('./src/css/*.css') // 找到目录下的所有的扩展名是css的文件
// 使用 pipe()来给我们执行需要的操作
// 添加兼容前缀的参数 {browsers:['last 2 versions']}
// 意思是: 兼容 浏览器 最新的两个版本
// 如果写在 () 中,会有警告 , 此处产生的警告,不影响正常执行
// 推荐写在 parkage.js 中 设定 browserslist 兼容的浏览器版本
.pipe(autoprefixer()) // 给css语法内容添加前缀
.pipe(cssmin()) // 给css代码打包压缩
.pipe(gulp.dest('./dist/css')) // 将打包压缩好的文件,写入到指定的文件夹中
}
// 2-2 设定js的打包规范
const jsHandler = function(){
return gulp.src('./src/js/*.js') // 找到js文件
.pipe(babel({presets:['@babel/env']})) // 将es6的语法,转化为es5的语法
// 参数是固定的语法格式
.pipe(uglify()) // 将ES5的语法格式js程序压缩
.pipe(gulp.dest('./dist/js')) // 写入到指定的文件夹中
}
// 2-3 设定HTML的打包规范
const htmlHandler = function(){
return gulp.src('./src/pages/*.html')
.pipe(htmlmin({ // 设定需要执行的打包规范
removeAttributeQuotes : true , // 删除属性上的双引号
removeComments: true, // 删除注释
collapseBooleanAttributes: true, // 将布尔值属性简写
collapseWhitespace : true, // 移除空格,去除的是标签之前的空格,标签内部和内容的空格不会去除
minifyCSS:true, // 压缩HTML中css代码
minifyJS:true, // 压缩HTML中的js代码
}))
.pipe(gulp.dest('./dist/pages')) // 将压缩文件写入到指定位置
}
// 2-4 音频视频,还有图片,不会打包压缩,会失真
// 音频视频,图片等,一般都会直接就复制粘贴到指定的文件夹
// 图片的复制粘贴
const imgHandler = function(){
return gulp.src('./src/images/**') // 不分区文件名和扩展名,是所有文件
.pipe(gulp.dest('./dist/images')) // 将读取的文件,直接写入到指定的位置
}
// 2-5 第三方的插件,不如 bootstrap,jquery等
// 已经压缩打包好了,直接复制粘贴到指定的位置即可
const libHandler = function(){
return gulp.src('./src/lib/**') // 不分区文件名和扩展名,是所有文件
.pipe(gulp.dest('./dist/lib')) // 将读取的文件,直接写入到指定的位置
}
// 要解决打包规范之外的问题
// 问题1:如果有文件名称的修改,压缩之后,原有的文件会继续存在
// 方案: 在新的压缩之前,先删除之前的压缩文件
// 使用 del()方法
const delHandler = function(){
return del(['./dist']);
}
// 问题2: 文件压缩之后要上线执行,要还原
// 我们通过 webserver() 方法 ,来自动搭建一个服务器,
// 然后会将程序代码还原成可以执行的效果
const serverHandler = function(){
return gulp.src('./dist') // 找到压缩的文件,并且执行其中的内容
.pipe(webserver({ // 定义一些配置参数
host:'127.0.0.1', // 定义域名地址,根据实际需求而定
port:8080, // 定义端口,根据实际需求而定
open: './pages/index.html', // 默认打开的文件,根据实际需求而定,一般是index.html
livereload : true , // 自动刷新浏览器 也叫 热重启
// 当文件内容,发生改变时,自动刷新页面,不用手动操作了
proxies:[
// 可以设定代理 , 就跟 nginx 中,设定代理的语法是一样的
// 只是名称不同了
// 为了完成跨域请求,如果不需要跨域,可以不写
// proxies 本身是一个数组的形式 , 每一组代理,都是一个对象形式
{
source : '/dt', // 代理名称
target: '......' // 代理的地址
},
{
source : '/jd', // 代理名称
target: '......' // 代理的地址
}
]
}))
}
// 1,如果要是设定代理,webserver会自动替我们来执行,不要修改nginx等服务器的配置文件
// 2,如果想要修改域名地址 , 必须要修改 hosts 文件 ,可以通过phpstudy,快速打开host文件
// 添加文件内容 127.0.0.1 自己定义的地址
// 这个操作,步骤,类似于我们搭建本地站点
// 三,导出,并且按照步骤自行执行 定义好的规范
// 如果 就直接执行函数 会 造成程序执行的错误和问题
// 因为 node 是 异步执行程序 , 有可能不会按照你定义的顺序来执行
// 就需要自动按照步骤来执行程序
// 需要建立一个执行的函数程序
// 监听程序,并且按照步骤来执行定义的程序
// 定义好了监听程序,如果源码发生改变,会自动更新代码,保持一致的
// 也就不用我们再一个一个来执行所有的打包规则了
const watchHandler = function(){
gulp.watch('./src/css/*.css' , cssHandler); // 当css文件夹中的css文件有变化时,执行css文件重新打包
gulp.watch('./src/js/*.js' , jsHandler); // 当js文件夹中的js文件有变化时,执行js文件重新打包
gulp.watch('./src/pages/*.html' , htmlHandler); // 当pages文件夹中的html文件有变化时,执行html文件重新打包
gulp.watch('./src/images/**' , imgHandler); // 当images文件夹中的图片文件有变化时,执行图片重新打包
gulp.watch('./src/lib/**' , libHandler); // 当lib文件夹中的第三方文件有变化时,执行第三方文件重新打包
}
// 定义 导出
// default 是默认的意思,也即是默认执行的程序和内容
// 定义有一个方法,默认执行其中的程序,是按照顺序来执行的
// 定义了 default 之后 我们直接执行 gulp 就可以了
// 会自动执行gulp 中的 default 中的 程序
module.exports.default = gulp.series(
// 其中的程序要有序进行
// 删除之前,已经存在的压缩版文件夹
delHandler,
// 删除原始的打包文件夹之后,要根据现在的原始文件,生成打包内容
// 这些压缩任务是,可以同时执行的
gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,libHandler),
// 还差一个搭建服务器,也就是还原代码执行
// 搭建服务器方法
serverHandler,
// 监听所有项目文件的改变
watchHandler
// 这里有一个监听任务和服务器任务,一旦启动程序,不能关闭cmd,要一直运行
);
// 总结 步骤
// 1,加载需要的依赖包
// 2,定义压缩规范
// 3,解决问题:
// 问题1: 原始文件名称改变,有重复内容,名称不同的压缩文件产生
// 解决方案,是直接删除原有的压缩文件夹
// 问题2: 如果运行压缩文件
// 解决方案,搭建服务器,通过服务器来运行
// 使用 webserver() 方法
// 这个方法会根据我们定义的参数,来自动搭建服务器
// 也就是我们昨天自己搭建的服务器,现在 webserver() 方法 来给我们执行了
// 设置 地址,设置端口,设置默认打开网址,设置热启动,设置跨域的代理.....
//
// 4,如何来执行定义的方法
// 1,定义一个监听程序,如果原始文件有改变,立刻自动重新打包压缩
// 让源码和压缩打包代码,随时保持一致
// 此时 , 这是里 是 将函数名称作为参数,而不是调用函数,千万不要加 ()
// 2,通过导出来执行我们所有定义的相关的方法
// 此时 , 这是里 是 将函数名称作为参数,而不是调用函数,千万不要加 ()
// 暂时先这么执行
// 先删除原始压缩文件,再写入新的压缩文件
// node.js的程序,都是异步执行,如果只是正压缩,没有问题,如果是有删除的时候,这么执行就要出问题了
// delHandler();
// cssHandler();
// jsHandler();
// htmlHandler();
// imgHandler();
// libHandler();
