browser-sync+less静态页面自动刷新

安装browser-sync

前提是已经安装了nodejs，若没有，请自行安装

npm install -g browser-sync

启动服务

打开命令行，进入你的项目目录，运行以下命令

browser-sync start --server --files "**/*.css, **/*.html"

它会监听你的css文件和html文件的改动，自动反应到页面上

在项目中使用less

1. 在vscode编辑器中安装插件 Easy LESS

2. 如果想修改easy less生成css的路径，打开用户自定义设置

   
   
   

   添加以下代码

    "less.compile": {
        "compress": true, // true => remove surplus whitespace
        "sourceMap": false, // true => generate source maps (.css.map files)
        "out": "../css/", // false => DON'T output .css files (overridable per-file, see below)
    }

"out"是输出配置，也可以是这样
"out": "${workspaceRoot}\\src\\assets\\css\\"
${workspaceRoot}代表根目录，它后面跟的就是你要设置的目录
参考文章：Easy less 路径配置修改

测试

至此，我们就可以愉快的写静态页面了， 我的项目结构如下

image.png

html中引用css中的文件，修改less文件中的代码，对应的会在css中重新生成新的css文件，页面自动刷新。