从我写 css 感觉真的超级麻烦说起

写 css ，我遇到了这些问题

为什么同一个属性要反复写导致修改的时候到处改？为什么不能像写 JS 一样，我设置一个变量后，统一读取变量？

好多元素有相似的属性，我能不能写成一个封装函数，调用即可？

每一个写 css 写到崩溃的人，都应该拥抱变化，学习 less 或者 scss。

本文以本人熟悉的 less 为例。

从 css 到 less, 用编程的方式写 css

详情参见 >> 学习Less-看这篇就够了

目的 - 我写 less，浏览器读 css

问题来了，写 less 是很方便，可是浏览器不认 less 啊？咋办？

所以我们得将 less 转化为 css。当然，less 肯定提供了工具。

将 less 转化为 css

跟着我，一步一步完成我们的目标。

新建文件夹 project2 ，使用

npm init // 初始化项目
复制代码

npm install less --save--dev // 使用 npm 安装 less 到开发环境
复制代码

在文件下创建 index.less   和 index.html 文件
复制代码

得到如下目录结构：

在 less 文件中写入代码：

@bg-color:red;
@text-primary-color:blue;
@text-pos:center;

body{
    background-color: @bg-color;
    color:@text-primary-color;
    text-align: @text-pos;
}
复制代码

在 package.json 中添加 build

{
  "name": "project2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build":"lessc index.less > index.css"// 添加这一行
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "less": "^4.1.2"
  }
}
复制代码

运行

npm run build
复制代码

此时我们可以看到目录中多了 index.css 文件。css 文件可直接被文件夹读取，我们就完成了第一步，将该 css 文件当作普通 css 文件引入即可。

自动监听 less 文件的改变，转化为 css

把它转化成 css 之后，问题来了。

每次改动 less 文件都要运行一下命令，也太麻烦了吧？能不能有什么方法让我每次一改动 less 文件，就自动同步到 css 中呢？

安装 wr

npm install wr
复制代码

改动 package.json 文件下 build 中的命令，并通过 npm run build 运行：

 "build": "wr --exec \"lessc index.less index.css\" index.less",
复制代码

这样，当我们改变 less 文件时，就自动将 less 文件编译成了 css 文件。

构建本地服务器，在服务器上跑项目

虽然可以直接访问本地 index.html 文件，但是在实际的开发过程中，使用本地项目进行开发很容易引起跨域问题，因此，我们一般会构建本地服务器进行开发。

npm install browser-sync --dev
复制代码

ctrl+c 终止当前命令，下载插件后，在 package.json 中添加：

"serve": "browser-sync"
复制代码

接着运行

npm run serve
复制代码

这时会默认访问 index.html 文件。我们可以在 html 文件中引入 css.

同时完成两个工作

问题又来了。运行 serve，得停掉 build .那如果我写 less，然后让它在编译器中起效，我得这样

npm run build -> ctrl+c -> npm run serve

实在有点麻烦啊。能不能两个命令同同时运行呢？我写完 less 它就自动变成 css 了，然后被引入了呢？

下载插件

npm i npm-run-all --dev
复制代码

这个插件支持同时去执行多个任务

在 package.json 添加命令：

"start": "run-p build serve"
复制代码

然后运行

npm run start
复制代码

这时，我们不用再管命令行。

在 less 中写完后，我们在浏览器刷新，即可看到最新效果。

自动刷新浏览器

每次写完都要刷新，太麻烦了吧。就不能我写完一保存，浏览器就自动刷新吗？？

修改 package.json 中 serve 命令如下。

"serve": "browser-sync start --server --files "*.html,*.css" "
复制代码

要注意，files 后面跟的是监听的文件格式。

当文件发生改变时，则自动更新。

此时我 package.json 文件内容如下：

{
  "name": "project2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "wr --exec \"lessc index.less index.css\" index.less",
    "serve": "browser-sync start --server --files \"*.html,*.css\" ",
    "start": "run-p build serve"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.27.9",
    "less": "^4.1.2",
    "npm-run-all": "^4.1.5",
    "wr": "^1.3.1"
  }
}


复制代码

结语

通过下载插件和配置命令，避免了一些繁琐的工作，完成了自动化构建。

如果有帮助，记得给我点个赞哦~

前端自动化构建，解放我的双手