Loading All The Plugins from Package.JSON 11 Note 11 NOTE 12 Installing Plugins for Responsive images|Css Minification|Js minification 12 Image processing plugins 12 Asset optimizer plugins 13 Anatomy of Tasks 19 Chapter 4: Concatenating files 21 Examples 21 Concat all css files into one using gulp-concat 21 Concat and Uglify JS and CSS files 21 Chapter 5: Create a watcher 23 Examples 23 Watcher task Examples 28 Installation and usage 28 Chapter 10: Minifying CSS 30 Examples 30 Using gulp-clean-css and gulp-rename 30 Sass and Css - Preprocessing with Gulp 30 Chapter 11: Minifying HTML 32 Examples

com/nimojs/gulp-book gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 现有目录结构如下： └── js/ 你还可以监控 js/ 目录下的 js 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它 帮助你自动构建 Web 项目。 gulp 还可以做很多事，例如： 1. 压缩CSS 2. 压缩图片 3. 编译Sass/LESS 4. 编译CoffeeScript 5. markdown 转换为 html gulp 入门指南 - 2 - 本文档使用 看云 构建 安装 使用 gulp 压缩 CSS 压缩 css 代码可降低 css 文件大小，提高页面打开速度。 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件，压缩它们，将压缩后的文件存放在 dist/css/ 目录下。 gulp 代码 你可以 下载所有示例代码 或 在线查看代码 当熟悉 使用 gulp 压缩 JS 的方法后，配置压缩 CSS 的 gulp 代码就变得很轻松。

如：import ‘/src/style.css?import’ 给 hmr 相关的请求地址添加时间戳，避免缓存。 如：import ‘/src/App.jsx?t=1599124870589’ Vite 打包流程 – 重写模块路径 浏览器不支持 JS 中直接写 import CSS、图片、JSON 等语法。 回顾一下 webpack loader 的处理策略： • CSS：转换成 js 的模块，执行模块会在 标签并且插入 CSS 内容 • 图片：转换成图片路径 • JSON: 转化成 js 模块，default export = json Vite 打包流程 – 静态资源打包策略 获取 Script 内容 如果有 style 就发送请求获取 style 的部分 发送请求获取 template 的部分 进⾏渲染 Vite 打包流程 – vue 脚本打包策略 判断是否是 .css 文件的请求 JS 中 import 的 CSS 进行 Sass/Less 的编译处理 基于 CSS 的源码包装成 JS 的模块 Vite 打包流程 – CSS 资源打包策略 将 CSS 源码加工成 JS 模块 updateStyle 会通过 CSS Style Shee API 后者 直接创建