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

目录

• 目录
  • 搭建项目目录
  • 如何实时更新
  • 如果你觉得配置麻烦，那么可以直接下载我写的这个 gulp-demo 即可

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

搭建项目目录

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

创建 package.json

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

npm init

安装 Gulp 以及一些插件

• gulp：一个自动化构建工具，这里使用的是 Gulp@4.x，如果你之前用的是低于 Gulp@4.x 的版本，那会存在一定的区别。
• 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 即可

• 下载地址：gulp-demo
• 如何运行看这个 gulp-demo 的项目文档 README.md（根目录） 即可。
• 最后在这个发一条外链，你可以不用管这一句废话：个人网站