gulp 是一款 自动 打包压缩工具
按照设定的 文件 设定的 压缩规范 将文件压缩 存储在 指定的文件夹中
可以做到 时时监听文件 也就是 文件内容只要改变 就会自动 打包压缩
使用 gulp 必须严格按照 gulp 的语法规范执行
同时 使用 第三方依赖包设定的 压缩规范
基本步骤:
1, 创建项目文件
2, 下载全局 gulp 依赖包
3, 下载 开发依赖 gulp包
4, 下载 相关的 压缩规范 开发依赖包
5, 编辑执行 gulp 程序
【注意:这里的项目文件是 shop 文件夹】
dist:压缩后的文件
src:压缩前的文件
gulp的相关依赖包
gulp程序的打包压缩执行 需要 相关的依赖包来执行
gulp相关程序只有在 开发阶段使用 打包压缩上线程序
开发结束 项目上线 gulp程序就不用再执行了
1, 安装全局作用域的 gulp 依赖包:npm i -g gulp
2, 切换至 项目文件夹, 初始化项目文件夹:npm init -y
3, 安装 开发依赖的 gulp 依赖包:npm i -D gulp
4, 安装 css打包压缩规范依赖包 ( 先自动添加好前缀 再打包压缩css程序 )
自动添加css兼容前缀依赖包: npm i -D gulp-autoprefixer
css的打包压缩规范: mpm i -D gulp-cssmin
安装成功后在package.json 中 查看
gulp-autoprefixer 需要 在 package.json 中 提前配置 参数
"browerslist":[ // 浏览器兼容版本设置
"last 2 version" , // 所有的浏览器,都是兼容最新的2个版本
"FireFox > 70", // 单独设定 火狐浏览器 兼容 大于 70的版本
"IOS > 7" // 单独设定 IOS浏览器 兼容 大于 7的版本
]
【注意: 必须要符合 json 语法 使用双引号 最后有一个单元不要写 逗号 之前单元后 添加逗号间隔,没有特殊需要 ‘大于××版本’ 可以不要】
5, 安装 js打包压缩规范依赖包
npm i -D gulp-babel
将其他版本的ES语法 转化为 ES5语法形式
npm i -D @babel/preset-env
和 gulp-babel 配合的依赖包
npm i -D @babel/core
和 gulp-babel 配合的依赖包
npm i -D gulp-uglify
将 ES5语法的 js程序 打包压缩
先将 其他ES语法形式的 js程序 转化为 ES5语法形式, 再 打包压缩执行
gulp-babel 需要设定参数 在 gulp程序中设定
babel( {presets:[’@babel/env’]} )
@babel/preset-env @babel/core 是和 gulp-babel配合的依赖包, 是加载 到 gulp-babel 中的 不需要独立加载
6, 安装 html打包压缩规范依赖包
npm i -D gulp-htmlmin
将 html 代码程序 打包压缩
gulp-htmlmin 需要 在 gulp程序中设定参数
7, 安装 删除依赖包
npm i -D del
8, 安装 服务器依赖包
npm i -D gulp-webserver
安装成功后在package.json 中
①, gulp 打包压缩规范程序的执行 有自己的语法形式, 必须要严格按照语法程序执行;
②, 需要 在 项目 文件夹 中 创建一个 js外部文件, 文件名 必须是 gulpfile.js
③, 在 gulpfile.js 文件中 先 加载需要的 依赖包
// 1, 加载相关依赖包
// gulp依赖包
const gulp = require('gulp');
// css需要的依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
// js需要的依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// html需要的依赖包
const htmlmin = require('gulp-htmlmin');
// 服务器依赖包
const webserver = require('gulp-webserver');
// 删除程序依赖包
const del = require('del');
④, 设定打包压缩规范,需要使用的是 gulp 语法形式
gulp.src( 路径 ) 是 gulp 依赖包自带的 函数方法程序
作用是 指定 要打包压缩的文件程序
*.css 文件名任意 扩展名是css的文件 也就是 任意名称的css文件 --- 子级文件
*.* 文件名任意 扩展匿任意的文件 也就是 所有的文件 --- 子级文件
** 当前文件夹中的所有文件 --- 后代文件
pipe( 压缩规范()/gulp程序() )
gulp自带的程序,作用是专门执行gulp程序和gulp压缩规范的
执行对象 就是 之前程序 获取的 文件内容
gulp.dest( 路径 ) 将 指定的文件 存储在 设定的 文件夹路径中
文件的名称不会改变
如果 路径不存在 会自动创建路径存储文件
gulp.series() gulp依赖包自带的程序
按照顺序执行其中设定的函数程序
参数是 函数名称
gulp.parallel() gulp依赖包自带的程序
同时执行其中设定的函数程序
参数是 函数名称
module.exports.default = 。。。。。
以 gulp 命令 执行 默认程序 也就是 gulpfile.js 中
导出的程序内容
gulp.watch(参数1,参数2)
gulp依赖包自带的程序
是 文件监听程序
参数1: 监听的文件路径 / 文件内容
也就是当参数1中的文件改变时 自动执行打包压缩规范程序
参数2: 执行的打包压缩规范的函数名称
// 2, 设定 打包压缩规范
// css打包规范语法
const cssHandler = function(){
return gulp.src('./src/css/*.css') // 指定 执行打包压缩的文件路径
.pipe( autoprefixer() ) // 对 src获取的文件 执行 添加前缀规范
.pipe( cssmin() ) // 对 src获取的文件 执行 添加前缀之后 执行打包压缩
.pipe( gulp.dest('./dist/css') ); // 将 执行了打包压缩规范之后的文件 指定 存储位置
}
// js打包规范
const jsHandler = function(){
return gulp.src('./src/js/*.js') // 指定 执行打包压缩的文件路径
.pipe( babel( {presets:['@babel/env']} ) ) // 讲其他版本的js语法,转化为ES5语法
.pipe( uglify() ) // 将ES5语法的js程序 打包压缩
.pipe( gulp.dest('./dist/js') ); // 将 执行了打包压缩规范之后的文件 指定 存储位置
}
// html打包规范
const htmlHandler = function(){
return gulp.src('./src/pages/*.html')
.pipe( htmlmin({ // 以 对象的形式 设定 html打包压缩参数
removeAttributeQuotes:true, // 删除属性中的双引号
removeComments:true, // 删除注释
// removeEmptyAttributes:true, // 删除空属性
removeEmptyElements:true, // 删除空标签
removeScriptTypeAttributes:true, // 删除 script标签的 type属性
removeStyleLinkTypeAttributes:true, // 删除 link标签的的 type属性
collapseBooleanAttributes:true, // 删除布尔属性的属性值
collapseWhitespace:true, // 删除标签之间的空格
minifyJS:true, // 压缩内容js程序
minifyCSS:true, // 压缩内部css程序
})).pipe( gulp.dest('./dist/pages') ) // 压缩后的文件存储在指定文件夹中
}
// 不需要打包,直接读取复制存储的文件程序
// 图片,音频,视频 后端程序 已经压缩好的程序
// 图片
const imageHandler = function(){
return gulp.src('./src/message/**').pipe( gulp.dest('./dist/message') );
}
// 后端程序
const phpHandler = function(){
return gulp.src('./src/server/**').pipe( gulp.dest('./dist/server') );
}
// 工具程序
const toolsHandler = function(){
return gulp.src('./src/tools/**').pipe( gulp.dest('./dist/tools') );
}
// 3, 设定删除程序
const delHandler = function(){
return del(['./dist']);
}
// 4, 设定监听程序
const watchHandler = function(){
gulp.watch( './src/css/*.css' , cssHandler );
gulp.watch( './src/js/*.js' , jsHandler );
gulp.watch( './src/pages/*.html' , htmlHandler );
gulp.watch( './src/message/**' , imageHandler );
gulp.watch( './src/server/**' , phpHandler );
gulp.watch( './src/tools/**' , toolsHandler );
}
// 5, 配置 gulp的 服务器
const webserverHandler = function(){
return gulp.src('./dist') // 运行的是 打包压缩的文件 路径是 dist文件夹
.pipe(webserver({
host:'127.0.0.1', // 服务器IP地址
port:'8080', // 服务器端口
open:'./pages/index.html', // 默认的首页面 相对路径是从 dist 文件夹开始的
livereload:true, // 开启热启动 只要服务器中文件内容改变 自动刷新
}))
}
// 设定 导出 默认执行程序
// 之前运行文件的命令是 node gulpfile.js
// 设定导出默认程序之后 命令是 gulp 会自动执行 gulpfile.js 文件程序
module.exports.default = gulp.series(
delHandler, // 先执行删除原始压缩文件操作
gulp.parallel( cssHandler , jsHandler , htmlHandler , imageHandler , phpHandler , toolsHandler ),
// 先执行一次打包压缩规范
webserverHandler, // 开启服务器
watchHandler, // 执行监听 如果 文件内容有改变 自动再次执行 打包压缩规范
)
"use strict" 打包压缩的js程序 执行的是 严格模式
对js语法有严格的规范
html文件中的js程序打包压缩是有问题的
js程序 都要写成外部文件的形式 导入执行