目录
一、创建项目文件夹
src 存储 源文件
dist 存储 压缩文件
二、项目文件夹初始化
npm init -y
三、 依赖包的下载
3.1 事前准备
nodejs 给我们提供了专门的下载 依赖包的服务器
通过 nodejs 自带的下载工具 npm 来 下载 依赖包
npm默认使用的是美国服务器地址，一般会修改为中国淘宝镜像地址。
设定程序
npm config set registry https://registry.npm.taobao.org
cnpm国内程序员编辑的中国国内下载方式，可以代替npm下载依赖包。
cnpm的配置下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
但是 有些依赖包 只能使用 npm 下载，有些 依赖包 只能使用 cnpm 下载。
3.2 全局依赖包的下载
3.2.1 下载gulp全局依赖包
npm i -g gulp
3.2.2 下载全局 node-sass依赖包
npm i -g node-sass
如果 能直接下载成功最好 如果 下载失败 需要 配置专门的下载地址
配置 node-sass 专用下载地址
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
先清除 node下载缓存 再次执行 npm i -g node-sass
npm cache clear --force 清除缓存命令
3.3 开发依赖包的下载
3.3.1 下载gulp开发依赖包
npm i -D gulp
3.3.2 css文件打包压缩依赖包
自动给css代码添加前缀
npm i -D gulp-autoprefixer
需要配置 package.json 文件中的配置设定。
"browserslist": [
"last 2 version" , 所有浏览器 兼容 最新的2个版本
"FireFox > 90" , 单独设定 火狐浏览器 兼容 90以上版本
"IOS > 9" 单独设定 苹果浏览器 兼容 9以上版本
]
实际项目中 浏览器版本的兼容 根据 不同的项目 做 相应 的设定。
打包压缩css程序代码
npm i -D gulp-cssmin
3.3.3 JavaScript文件 打包压缩需要的依赖包
将 其他版本的JavaScript语法转化为 ES5 语法
npm i -D gulp-babel
npm i -D @babel/preset-env
npm i -D @babel/core
将 ES5 语法的 JavaScript程序 打包压缩
npm i -D gulp-uglify
如果 js 程序 中 有 promise 和 async await 需要再多加载一个js配置文件 polyfill.js
这个文件可以上网搜索。
3.3.4 html文件打包压缩需要的依赖包
npm i -D gulp-htmlmin
3.3.5 sass文件 打包压缩需要的依赖包
npm i -D [email protected]
3.3.6 下载 gulp服务器相关依赖包
npm i -D gulp-webserver
3.3.7 下载删除程序相关包
npm i -D del
3.3 总结
多个依赖包的安装方式相同 可以 一次下载多个依赖包
npm i -D gulp gulp-autoprefixer gulp-cssmin gulp-babel @babel/preset-env @babel/core gulp-uglify gulp-htmlmin [email protected] gulp-webserver del
最终为两个全局依赖包 11个开发依赖包。
两个全局依赖包。路径为C:\Users\用户名\AppData\Roaming\npm\node_modules
注意开启隐藏文件夹。
四、gulp打包开始
4.1 打包流程概述
4.2 需要掌握的打包函数方法
gulp.src('路径')
gulp.src('路径')
是 gulp 依赖包 自带的函数程序
按照路径 读取导入 指定文件的文件内容
*.css 文件名是任意名称 扩展名是 css 的文件
*.* 文件名是任意名称 扩展名是 任意名称
只 读取文件 不会 读取 文件夹
** 读取所有文件和文件夹的全部内容
gulp.dest('路径')
gulp.dest('路径')
将 文件内容 按照指定的路径 存储
生成 文件名称和源文件相同的
执行过打包压缩之后的新的文件
.pipe( )
.pipe( )
和 gulp.src() 配合使用的
gulp.src() 读取文件内容
.pipe() 操作 读取的文件内容
一般 操作内容是 打包压缩规范 和
gulp.watch( 参数1 , 参数2 )
gulp.watch( 参数1 , 参数2 )
是 gulp 依赖包 自带的函数程序
按照设定 对 指定的文件 执行 监听
当 指定文件内容改变时 执行 设定好的 打包压缩规范
参数1 设定的监听文件路径
参数2 监听文件内容改变时 触发执行的 打包压缩规范
设定的必须是 打包压缩规范的 函数名称
gulp.series( 参数1 , 参数2 .... )
gulp.series( 参数1 , 参数2 .... )
是 gulp 依赖包 自带的函数程序
按照 顺序 执行 设定的函数程序
gulp.parallel()
gulp.parallel()
是 gulp 依赖包 自带的函数程序
按照 同时 执行 设定的函数程序
del([路径1,路径2...])
del([路径1,路径2...])
按照 路径 删除文件
路径是 以 数组的形式设定
文件存在 删除 不存在就不会删除
module.exports.default = 函数程序
module.exports.default = 函数程序
使用模块化开发语法
定义 当期 gulpfile.js 文件 导出的程序内容
设定之后 再 调用 gulfile.js 文件
就可以直接使用 gulp 命令
4.3 css文件的打包
代码展示
// 导入gulp开发依赖包
const gulp = require('gulp') ;
// css开发依赖包
// 添加兼容前缀
const autoprefixer = require('gulp-autoprefixer');
// css打包压缩
const cssmin = require('gulp-cssmin');
// css打包规范
const cssHandler = function(){
return gulp.src('./src/css/*.css')
// 按照src中的路径读取文件 ‘*.css’代表该级文件下的所有后缀为css的文件
.pipe( autoprefixer() )
//对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
.pipe( cssmin() )
// 将 添加前缀之后的文件内容 压缩
.pipe( gulp.dest('./dist/css') );
// 按照指定的路径存储文件 生成的压缩文件名称 和 源文件名称相同
}
// 监听程序
const watchHandler = function(){
// 设定css的监听程序 当 路径 指定的css 文件内容改变时 执行 cssHandler 压缩规范
gulp.watch( './src/css/*.css' , cssHandler )
}
// gulpfile.js 文件的运行方式
module.exports.default = gulp.series(
gulp.parallel( cssHandler ),
// 监听事件
watchHandler
)代码演示：
4.4 js文件的打包
代码展示
// 导入gulp开发依赖包
const gulp = require('gulp') ;
// css开发依赖包
// 添加兼容前缀
const autoprefixer = require('gulp-autoprefixer');
// css打包压缩
const cssmin = require('gulp-cssmin');
// js开发依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// css打包规范
const cssHandler = function(){
return gulp.src('./src/css/*.css')
// 按照src中的路径读取文件 ‘*.css’代表该级文件下的所有后缀为css的文件
.pipe( autoprefixer() )
//对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
.pipe( cssmin() )
// 将 添加前缀之后的文件内容 压缩
.pipe( gulp.dest('./dist/css') );
// 按照指定的路径存储文件 生成的压缩文件名称 和 源文件名称相同
}
// js打包规范
const jsHandler = function(){
return gulp.src('./src/js/*.js')
// 按照路径导入 js文件内容
.pipe( babel( {presets : ['@babel/env']} ) )
// 转化为ES5语法格式
.pipe( uglify() )
// 压缩js程序
.pipe( gulp.dest('./dist/js') )
}
// 监听程序
const watchHandler = function(){
// 设定css的监听程序 当 路径 指定的css 文件内容改变时 执行 cssHandler 压缩规范
gulp.watch( './src/css/*.css' , cssHandler ),
gulp.watch('./src/js/*.js' , jsHandler )
}
// gulpfile.js 文件的运行方式
module.exports.default = gulp.series(
gulp.parallel( cssHandler ,jsHandler),
// 监听事件
watchHandler
)运行结果
注意：
4.5 HTML文件的打包
部分代码展示
// HTML打包规范
const htmlHendler = function(){
return gulp.src('./src/pages/*.html')
.pipe( htmlmin({
// 在 htmlmin() 中 以 对象的形式 设定html文件 打包压缩配置
removeAttributeQuotes : true ,
// 删除属性中的双引号
removeComments : true ,
// 删除注释
// removeEmptyAttributes : true ,
// 删除 空属性
// removeEmptyElements : true ,
// 删除 空标签
removeScriptTypeAttributes : true ,
// 删除 script标签 type属性
removeStyleLinkTypeAttributes : true ,
// 删除 link标签 style标签 type属性
collapseBooleanAttributes : true ,
// 删除 布尔属性的属性值
collapseWhitespace : true ,
// 删除 标签之间的空格
minifyCSS : true ,
// 压缩内部式 css语法
minifyJS : true ,
// 压缩内部式 js语法
}) )
.pipe(gulp.dest('./dist/pages'));
}运行结果
4.6 sass打包规范
代码展示
// sass打包规范
const sassHandler = function () {
return gulp.src('./src/sass/*.scss') // 按照指定路径读取sass文件内容
.pipe(sass()) // 将读取的sass文件内容 编译成 css文件
.pipe(autoprefixer()) // 对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
.pipe(cssmin()) // 将 添加前缀之后的文件内容 压缩
.pipe(gulp.dest('./dist/css')) // 将 打包压缩的文件存储到css文件夹中
}运行结果
其他各种打包规范操作大同小异，不再做过多赘述，下面为大家奉上完整代码。
五、源代码
// 一、导入各类开发依赖包
// 导入gulp开发依赖包
const gulp = require('gulp');
// css开发依赖包
// 添加兼容前缀
const autoprefixer = require('gulp-autoprefixer');
// css打包压缩
const cssmin = require('gulp-cssmin');
// js开发依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// html开发依赖包
const htmlmin = require('gulp-htmlmin');
// sass开发依赖包
const sass = require('gulp-sass');
// 删除开发依赖包
const del = require('del');
// 二、各类文件的打包规范
// css打包规范
const cssHandler = function () {
return gulp.src('./src/css/*.css')
// 按照src中的路径读取文件 ‘*.css’代表该级文件下的所有后缀为css的文件
.pipe(autoprefixer())
//对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
.pipe(cssmin())
// 将 添加前缀之后的文件内容 压缩
.pipe(gulp.dest('./dist/css'));
// 按照指定的路径存储文件 生成的压缩文件名称 和 源文件名称相同
}
// js打包规范
const jsHandler = function () {
return gulp.src('./src/js/*.js')
// 按照路径导入 js文件内容
.pipe(babel({ presets: ['@babel/env'] }))
// 转化为ES5语法格式
.pipe(uglify())
// 压缩js程序
.pipe(gulp.dest('./dist/js'))
}
// HTML打包规范
const htmlHendler = function () {
return gulp.src('./src/pages/*.html')
.pipe(htmlmin({
// 在 htmlmin() 中 以 对象的形式 设定html文件 打包压缩配置
removeAttributeQuotes: true,
// 删除属性中的双引号
removeComments: true,
// 删除注释
// removeEmptyAttributes : true ,
// 删除 空属性
// removeEmptyElements : true ,
// 删除 空标签
removeScriptTypeAttributes: true,
// 删除 script标签 type属性
removeStyleLinkTypeAttributes: true,
// 删除 link标签 style标签 type属性
collapseBooleanAttributes: true,
// 删除 布尔属性的属性值
collapseWhitespace: true,
// 删除 标签之间的空格
minifyCSS: true,
// 压缩内部式 css语法
minifyJS: true,
// 压缩内部式 js语法
}))
.pipe(gulp.dest('./dist/pages'));
}
// sass打包规范
const sassHandler = function () {
return gulp.src('./src/sass/*.scss') // 按照指定路径读取sass文件内容
.pipe(sass()) // 将读取的sass文件内容 编译成 css文件
.pipe(autoprefixer()) // 对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
.pipe(cssmin()) // 将 添加前缀之后的文件内容 压缩
.pipe(gulp.dest('./dist/css')) // 将 打包压缩的文件存储到css文件夹中
}
// 工具包打包规范
const toolsHandler = function () {
return gulp.src('./src/tools/**')
.pipe(gulp.dest('./dist/tools'))
}
// 图片文件
const imgHandler = function () {
return gulp.src('./src/message/*.*') // 按照指定路径读取文件内容
.pipe(gulp.dest('./dist/message')) // 直接存储到指定的文件夹中
}
//后端文件
const phpHandler = function(){
return gulp.src( './src/server/*.php' ) // 按照执行路径读取文件内容
.pipe( gulp.dest( './dist/server' ) ) // 直接存储到指定文件夹中
}
// 四、监听程序
const watchHandler = function () {
// 设定css的监听程序 当 路径 指定的css 文件内容改变时 执行 cssHandler 压缩规范
gulp.watch('./src/css/*.css', cssHandler)
gulp.watch('./src/js/*.js', jsHandler)
gulp.watch('./src/pages/*.html', htmlHendler)
gulp.watch('./src/tools/**', toolsHandler)
gulp.watch('./src/sass/*.scss', sassHandler)
gulp.watch('./src/message/**', imgHandler)
gulp.watch('./src/server/*.php', phpHandler)
}
//五、删除规范设定
// gulp.dest() 只有 生成文件的功能 没有删除文件的功能
const delHandler = function(){
return del( [ './dist' ] );
}
// 六、gulpfile.js 文件的运行方式
module.exports.default = gulp.series(
// 先 删除 之前打包压缩内容
delHandler,
// 在 执行 新的打包压缩 让压缩文件内容和当前源文件内容同步
gulp.parallel(cssHandler, jsHandler, htmlHendler, toolsHandler, sassHandler,imgHandler, phpHandler, ),
// 监听事件
watchHandler
)码字不易，点个赞吧~~