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

Posted 前端技术日常

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Gulp 开发 HTML 静态页面和 Less 实时更新相关的知识,希望对你有一定的参考价值。

之前一直在用 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/


以上是关于Gulp 开发 HTML 静态页面和 Less 实时更新的主要内容,如果未能解决你的问题,请参考以下文章

如何使用Gulp?

gulp的安装使用

第140期Gulp新手入门教程

gulp的简单使用,如何配置一个可以用html+less/sass写微信小程序的项目

Gulp入门教程

Gulp 给所有静态文件引用加版本号