Gulp 开发 HTML 静态页面和 Less 实时更新

Posted 2021-03-30 前端技术日常

•之前一直在用 Vue 或者 React 在写 SPA 项目的时候，因为使用了 Less 感觉很不错，现在转回来写纯 css 的时候，感觉很难受（特别是写很长的选择器时）。•然后就分享一下在 html 静态页面中如何使用 Less（当然你也可以使用 Sass 或者 Stylus），以及实时更新。•如果你没有用过 Gulp，请点击这里 Gulp 官网^[1]

搭建项目目录

•这个是我的 gulp-demo 的项目目录。

创建 package.json

•使用 npm init 按照步骤往下走•或者使用 npm init -y 一键初始化 package.json 文件

npm init

安装 Gulp 以及一些插件

•gulp：一个自动化构建工具，这里使用的是 Gulp@4.x^[2]，如果你之前用的是低于 Gulp@4.x^[3] 的版本，那会存在一定的区别。•gulp-autoprefixer：一个给你的 css 自动添加浏览器前缀插件。•gulp-cssmin：一个压缩 CSS 代码的插件•gulp-file-include：一个可以导入多个 HTML 代码的插件，这个你的 HTML 的公共部分可以拆分出来。例如：footer.html、header.html等等。•gulp-htmlmin：一个压缩 HTML 代码的插件，当你是处于前后端不分离的情况时，可以选择不用。•gulp-less：一个识别 less 代码的插件，类似于 webpack 里的 loader。•gulp-uglify：一个压缩 JS 代码的插件。•gulp-babel：一个转译es6代码的插件•@babel/core：增加对es6的polyfill•@babel/preset-env：插件集合。•del：一个可以删除文件的插件，主要用来让你重新编译时删除之前的代码，避免存在冲突。

npm i -D gulp gulp-autoprefixer gulp-cssmin gulp-file-include gulp-htmlmin gulp-less gulp-uglify gulp-babel @babel/core @babel/preset-env del

编写配置文件及相关环境

•在 config 目录下创建三个文件

•gulpfile.base.js：你的开发环境和生产环境都需要的公共方法或者是公共 task。•gulpfile.dev.js：开发环境需要的配置•gulpfile.prod.js：生产环境需要的配置

•在 package.json 里添加 scripts 命令

•start 命令，至于为啥不直接执行 dev 命令，因为它可以直接运行npm start，少写一个 run。•dev 命令，开发环境命令，并且实时监听 html 文件和 less 文件的改变。•build 命令，打包项目命令。

{ "scripts":{ "start": "npm run dev", "dev": "gulp dev -f config/gulpfile.dev.js", "build": "gulp build -f config/gulpfile.prod.js" }}

如何实时更新

实时更新 CSS 文件

•使用 gulp 的 watch api 编写你需要实时监听的文件就可以了，当你的 less 文件改变时，它就会自动编译成 css。

实时更新 HTML 文件

•如果你用的是 vscode 编辑器的话，那就按照 EaseServer 插件即可，运行快捷键：Ctrl + Shift + Enter•开发环境运行你编译的 dev/index.html 即可。

如果你觉得配置麻烦，那么可以直接下载我写的这个 gulp-demo 即可

References

[1] Gulp 官网: https://www.gulpjs.com.cn/
[2] Gulp@4.x: mailto:Gulp@4.x
[3] Gulp@4.x: mailto:Gulp@4.x
[4] gulp-demo: https://gitee.com/MINECASE/gulp-demo.git
[5] 个人网站: https://biaov.cn/