一.概念
html,css,js自动化压缩工具
可以运行在node环境
二.gulp下载:
(1)安装【全局gulp】依赖包
npm i -g gulp 全局包可直接输入安装,不寻找路径
最新版本4.0.2
4.0- 版本 是正常版本号
4.0+ 版本 是CLI version 2.3.0版本号
(2)配置项目文件夹
src存储源文件的文件夹
dist存储压缩后文件的文件夹
(3)初始化文件夹
如果是第一次执行项目 npm init -y 初始化文件夹
如果是继续之前的项目开发 复制package.json文件
用npm i 初始化文件夹并下载依赖包
(4)安装【项目gulp】,与全局gulp不同
npm i gulp 需要寻找路径,路径切换到项目文件夹
三.配置gulp打包压缩规范文件
(1)在项目文件夹中,创建gulpfile.js文件,放所有的配置程序
(2)css
1.[下载依赖包]使用第三方依赖包,执行别人写好的执行规范
在npm下载依赖包css的压缩规范:
npm i gulp-cssmin 下载依赖包css的压缩规范。然后会出现package.json文件
2.在gulpfile.js中,加载gulp依赖包
const gulp = require('gulp')
3.在gulpfile.js中,压缩css依赖包
const css = require('gulp-cssmin')
const autoprefixer = require('gulp-autoprefixer')
4.在gulpfile.js中,指定css压缩规范
const cssHandler = function(){
return gulp.src('./src/css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'))
}
5.[下载依赖包]前缀规范
npm i gulp-autoprefixer
6.在gulpfile.js中,添加前缀,打包规范
const cssHandler = function(){
return gulp.src('./src/css/*.css')
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'))
}
7.在package.json文件中,添加浏览器对css的兼容版本,每一段结束需要加逗号,最后一项不加逗号
"browserslist":[
"last 2 version",所有浏览器兼容最新的两个版本前缀语法
"FireFox" > 20, 可以单独设定某一种浏览器需要兼容的版本
"IOS > 7" 一般是浏览器名称 > 某个版本号
]
8.设定监听程序。在gulpfile.js中,添加gulp.watch
const watchHandler = function(){
gulp.watch('./src/css*.css',cssHandler) 监听的是这个路径下扩展名是css的文件
} 当监听文件发生改变时,自动执行cssHandler定义的压缩文件
cssHandler是回调函数赋值一个函数的名称,不要有()
module.exports.default = gulp.series( module.exports.default = 是设定gulpfile.js程序,到处的默认执行的程序内容
series() 是gulp提供的方法,按照顺序执行,定义的所有程序
gulp.parallel(cssHandler), 先执行打包规范,先打包所有的文件。是gulp提供的方法,是同时执行定义的程序
watchHandler 后执行监听程序,监听所有原始文件
)
9.设定删除规范,在gulpfile.js添加规范
---目的:是为防止程序执行过程中,dist中有些文件已经存在。导致文件冲突,需要删除dist原有文件,然后重新进行监听
---操作:下载删除依赖包 npm i del
const delHandler = function(){
del(['./dist']) 指定要删除的文件夹的内容
}
在module.exports.default中最前面添加delHandler
*压缩规范
---gulpfile.js必须是这个文件名,所有的配置程序都设定在这个文件
---gulp.src() 按照指定的文件路径,找到要压缩的文件名
----*.css 文件名可以任意,扩展名必须是css
*.* 文件名和扩展名都可以任意内容
---cssmin() 压缩规范,将src中指定的所有文件,按照规范执行压缩
自动生成与源文件,文件名完全相同的压缩文件
---gulp.dest() 将执行好的压缩文件,指定一个存储位置
如果没有文件夹,会自动生成一个对应的文件夹生成新的文件
---pipe() gulp定义好的程序,作 用是执行指定的程序内容
执行加载的第三方依赖包中定义的css文件名
---gulp.parallel(cssHandler) 执行打包规范
--设定监听程序 gulp.watch('路径',cssHandler) 监听路径的文件
当监听文件发生改变,自动执行cssHandler定义的压缩规范
cssHandler是回调函数赋值的一个函数名称,没有小括号
(3)js
第三方依赖包,执行别人写好的压缩规范
下载4个依赖包,加载2个依赖包
下载4个依赖包
npm i gulp-uglify 打包压缩ES5语法规范的JS代码
npm i gulp-babel 将其他ES语法规范,转化成ES5语法规范
npm i @babel/core babel默认只能转化ES6语法为ES5格式
npm i @babel/preset-env 需要这两个依赖包配合才能完成转化
配合的两个依赖包,只要下载,不需要加载
可一次下载4个 包名空格隔开
npm i uglify babel @babel/core @babel/preset-env
1.在gulpfile.js中加载ES5依赖包
const uglify = require('gulp-uglify)
const babel = require('gulp-babel')
2.打包规范
const jsHandler = function(){
和css第6步一样
return gulp.src('./src/js/*.js') 指定要压缩的文件路径和压缩文件,名字是任意内容,扩展名是js
.pipe(babel({presets:['@babel/env']})) 调用两个配合的依赖包,将其他ES语法,转化为ES5语法
.pipe(uglify()) 将转化的ES5语法程序,执行js压缩规范
.pipe(gulp.dest('./dist/css')) 将压缩好的程序,存储在dist/js 文件夹
}
2.在监听程序中,添加js的监听规范
gulp.watch('./src/js*.js',jsHandler)
--加载js压缩es5依赖包
3.命令输入gulp,进行压缩执行
(4)html
1.在gulpfile.js添加压缩依赖包
const htmlmin = require('gulp-htmlmin')
2.在命令中下载html相关的依赖包
npm i gulp-htmlmin html压缩依赖包
3.在gulpfile.js进行压缩打包规范
const htmlHandler = function(){
gulp.src('./src/pages/*.html') 指定要压缩的文件路径和压缩文件,名字是任意内容,扩展名是html
.pipe(htmlmin({
removeAttributeQuotes:true, 自动删除属性中的双引号
removeComments:true, 自动删除注释
collapseBooleanAttributes:true, 布尔属性删除属性值
collapseWhitespace:true, 自动删除标签之间的空格
minifyCSS:true, 自动压缩内部js样式
minifyJS:true, 这两个true压缩有问题,不会做到最完美压缩,实际项目中,不要使用内部的css和js语法,都要用外部文件
})) 执行压缩规范,定义相应的参数,实际项目中根据项目需求设定
.pipe(gulp.dest('./dist/pages'))
}
}
4.在watchHandler中添加监听
gulp.watch('./src/pages/*.html')
5.命令中输入gulp进行压缩执行
(5)音频,视频等不需要压缩的文件。包括别人写好的文件,例如JQ等
定义图片规范,不用压缩,只需复制到压缩的指定文件夹
在gulpfile.js中
const imgHandler = function(){
return gulp.src('./src/images/*.*') 把这个路径的文件
.pipe(gulp.dest('./dist/images')) 易懂到这里
}
在监听watchHandler中,加入图片的监听执行
gulp.watch('./src/images/*.*',imgHandler)
(6)可以搭建服务器
1.下载服务器依赖包 npm i gulp-webserver gulp搭建服务器依赖包
2.加载一个服务器的依赖包。在gulpfile.js进行加载
const webserver = require('gulp-webserver')
3.搭建外部server,指定gulp搭建服务器
const webserverHandler = function(){
return gulp.src('./dist') 搭建服务器要有服务器文件,指定服务器运行文件,所在文件夹,使用的是压缩文件,不是源文件
。pipe(webserver({ 以对象的形式,定义配置参数
host:'127.0.0.1' 指定服务器地址:127.0.0.1/localhost
prot:'8080' 指定监听端口 0-65535都可以
livereload:true 热启动,如果页面内容有修改,自动刷新页面,不会手动刷新
open:'./pages/index.html'服务器启动, 默认打开的页面
}))
}
4.把上面那个加载到module.exports.default = gulp.series中,进行启动
在module.exports.default中最添加webserverHandler 启动服务器程序
5.执行gulp后,默认打开页面,并会执行热启动
(7)设定监听程序,
(8)配置默认执行
入门gulp
最新推荐文章于 2024-09-01 23:35:40 发布