gulp 自动打包压缩工具

【注意： 必须要符合 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, // 先执行删除原始压缩文件操作

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题

源码讲义、实战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题