gulp的作用
删除文件中冗余的内容,压缩文件,减小文件体积
实际项目中运行的都是压缩完成以后的文件
减小加载响应时间
gulp打包压缩对象
html,css,js,sass,webserver
音频,图片,插件等正常情况下都是打包完成的,直接移动到dist文件中就可以
服务器食欲gulp一起绑定执行的,执行的是打包压缩好的程序文件
gulp执行过程
所有执行步骤必须严格遵守,尤其是语法规范必须严格执行
1、下载全局gulp
npm i -g gulp
2、创建项目文件
源文件src:
pages 存储html文件
css 存储css文件
sass 存储sass文件
images 存储图片
js 存储js文件
plug 存储插件
压缩文件 dist:
将压缩好的文件存放在dist中
文件名称与原文件名称保持一致
实际项目中为了保持文件名称路径一致,不添加多余的文件名后缀min等
3、文件初始化
整个项目第一次执行
npm init -y
实际项目中,或者下载git中的项目
下载 package.json 文件,到项目文件夹中
package.json 中 存储了所有依赖包的信息 以及 依赖包的相关设定
在项目路径下,执行 npm install 会自动安装依赖包
4、如果是第一次执行项目,需要逐一安装依赖包
如果是已经有完整的 package.json
将 package.json 复制拷贝到指定的文件夹中,执行 npm install 会自动安装记录的依赖包
安装依赖包 局部/项目依赖包
npm i gulp gulp 依赖包
npm i gulp-cssmin css压缩依赖包
npm i gulp-autoprefixer css添加前缀依赖包
npm i gulp-uglify ES5语法压缩依赖包
npm i gulp-babel 其他语法转化ES5语法规范
npm i @babel/core 与 gulp-babel 配合的依赖包
npm i @babel/preset-env
npm i htmlmin html压缩依赖包
npm i webserver 服务器依赖包
npm i del 删除文件依赖包
npm i sass sass文件依赖包
创建 gulpfile.js 文件,定义gulp打包压缩程序规范
1、加载所有依赖包
@babel/core 与 @babel/preset-env 是与gulp-babel配合使用的只需下载,不需要加载。
2、制定打包规范
a 、css 打包规范
const cssHandler = function(){
return gulp.src('./src/css/*.css')
.pipe( autoprefixer() )
.pipe( cssmin() )
.pipe( gulp.dest( './dist/css' ) )
}
注意: 1 , 先添加前缀,再执行打包
2 , 设定 浏览器兼容版本,在 package.json中设定
"browserslist": [
"last 2 versions",
"IOS > 7",
"FireFox > 20"
]
b 、 js打包规范
const jsHandler = function(){
return gulp.src('./src/js/*.js')
.pipe( babel( {presets:['@babel/env']} ) )
.pipe( uglify() )
.pipe( gulp.dest( './dist/js' ) )
}
注意:1, babel( {presets:['@babel/env']} ) 以对象的形式定义参数
2, 先将其他语法规范,转化为 ES5 语法规范,再执行打包压缩
c 、 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程序
// 虽然可以压缩HTML中的js和css,但是压缩执行的不完美
// 实际项目中,不要有内部,js和css,都要写成外部文件形式
}))
.pipe( gulp.dest( './dist/pages' ) )
}
注意: 1, htmlmin() 中以对象的形式定义参数
d 、图片等不需要打包压缩的,就直接移动至dist文件夹
const imgHandler = function(){
return gulp.src('./src/images/*.*')
.pipe( gulp.dest('./dist/images') )
}
e , 设定 服务器执行规范 调用执行打包压缩好的文件
const webserverHandler = function(){
return gulp.src('./dist') // 指定的是运行文件的目录,也就是要运行的压缩的文件,所在的文件夹
.pipe(webserver({
host:'127.0.0.1', // 主机域名,当前就是 127.0.0.1 或者 localhost
port:'8080', // 定义监听端口
livereload:true, // 执行热启动,如果程序代码,改变,自动刷新页面,不用重启服务器,不用手动刷新页面
open:'./pages/index.html', // 默认打开的网页,输入 127.0.0.1:8080 地址就会直接打开的页面
// 默认的地址是,gulp.src()设定的文件夹位置,也就是默认是 dist 压缩文件夹所在的位置,执行的也是压缩之后的文件
}))
}
注意: 1, gulp.src('./dist') 设定执行的打包压缩文件,存储的文件夹路径
2, open 设定服务器启动之后,执行的默认页面
设定相对路径的起始位置,是 gulp.src() 设定的文件夹位置
3, livereload:true, 热启动 页面样式等更新,不用手动刷新,服务器会自动刷新
f、制定sass的编译打包压缩规范
const sassHandler = function(){
return gulp.src('./src/sass/*.scss')
.pipe( sass() ) // 将sass编译为css
.pipe( autoprefixer() ) // 之后就是执行css的打包压缩规范
.pipe( cssmin() )
.pipe( gulp.dest( './dist/css' ) )
}
设定监听程序
a , 设定删除规范,也就是每次执行新的打包压缩之前,先删除原始的打包内容
const delHandler = function(){
return del(['./dist']);
}
b , 设定监听规范,指定监听的文件文件夹,如果出现修改,会自动重新打包压缩
const watchHandler = function(){
gulp.watch( './src/css/*.css' , cssHandler);
gulp.watch( './src/js/*.js' , jsHandler);
gulp.watch( './src/pages/*.html' , htmlHandler);
gulp.watch( './src/images/*.*' , imgHandler);
}
注意: 1, gulp.watch() 第一个参数是,监听的文件夹文件路径
gulp.watch() 第二个参数是,监听文件内容发生改变时,执行的打包规范
2, 必须要定义的打包规范的函数名称
c , 设定导出默认执行程序
module.exports.default = gulp.series(
delHandler,
gulp.parallel( cssHandler , jsHandler , htmlHandler , imgHandler),
webserverHandler,
watchHandler,
)
注意: 1,设定 module.exports.default 之后 ,再执行gulp,只要在路径下输入 gulp 就可以了
2,gulp.series() 按照顺序执行设定的程序,顺序必须正确
gulp.parallel() 是同时执行所有设定的程序
顺序一定是 : 先删除之前打包压缩的文件
在重新压缩所有需要打包压缩,移动的文件
开启服务器
执行监听
标签:npm,src,压缩,gulp,详解,打包,css
来源: https://www.cnblogs.com/cyp926/p/13545655.html