gulp打包详解

时间：2020-08-27 17:08:37 阅读：82 评论：0 收藏：0 [点我收藏+]

标签：设定 server 规范 webserver UNC 监听端口 row white 空格

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() 是同时执行所有设定的程序

顺序一定是 : 先删除之前打包压缩的文件

在重新压缩所有需要打包压缩,移动的文件

开启服务器

执行监听

gulp打包详解

标签：设定 server 规范 webserver UNC 监听端口 row white 空格

原文地址：https://www.cnblogs.com/cyp926/p/13545655.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

gulp打包详解

gulp的作用

gulp打包压缩对象

gulp执行过程

1、下载全局gulp

2、创建项目文件

3、文件初始化

4、如果是第一次执行项目,需要逐一安装依赖包

创建 gulpfile.js 文件,定义gulp打包压缩程序规范

1、加载所有依赖包

2、制定打包规范

a 、css 打包规范

b 、 js打包规范

c 、 html打包压缩规范

d 、图片等不需要打包压缩的,就直接移动至dist文件夹

e , 设定 服务器执行规范 调用执行打包压缩好的文件

f、制定sass的编译打包压缩规范

设定监听程序

　　　　1、下载全局gulp

　　　　2、创建项目文件

　　　　3、文件初始化　

　　　　4、如果是第一次执行项目,需要逐一安装依赖包

　　1、加载所有依赖包

　　2、制定打包规范

　　a 、css 打包规范

e , 设定服务器执行规范调用执行打包压缩好的文件

　　　　f、制定sass的编译打包压缩规范