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

  • 之前一直在用 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(根目录) 即可。
  • 最后在这个发一条外链,你可以不用管这一句废话:个人网站
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页