自动化构建小栗子

是洋柿子啊
334 阅读4分钟

「这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战」

前言

自动化构建是前端工程化当中重要的组成部分，通过机器代替手工完成工作，减少前端的工作量

什么是自动化构建？

首先我们要先理解什么是构建？

可理解为转换，把一个东西转换成另一个东西，了解了这个之后，我们就能更好的理解是什么自动化构建了

自动化构建

把源代码自动化转换成生产环境中可以运行的代码，这个过程称为自动化构建工作流

自动化构建的作用

脱离运行环境的问题，在开发阶段使用提高效率的语法、规范和标准，比如ES最新标准 sass 借助模板引擎创建重复的文件等

简单体验自动化构建

首先我们先创建一个 scss 模块，并且安装一下：

npm add sass --dev 或 yarn add sass --dev

$body-bg: #f8f9fb;
$body-color: #333;
body {
  margin: 0 auto;
  padding: 20px;
  max-width: 800px;
  background-color: $body-bg;
  color: $body-color;
}

安装完毕之后node_modules中会有出现.bin文件夹

image.png

然后我们可以在控制台中输入：

 .\node_modules\.bin\sass

执行该命令，执行完毕该命令之后，会出一些帮助信息

image.png 如此一来我们就可以按照文档，选择入口路径以及输出路径

 // .\node_modules\.bin\sass 输入路径 输出路径
 .\node_modules\.bin\sass scss/style.scss css/style.css

运行完毕之后，我们获得如下内容：

image.png

虽然看起来很好玩，但是每次都需要这样重复的输入命令实在是太麻烦了，该如何解决呢？

NPM Scripts 应运而生

NPM Scripts 使用

我们可以在NPM Scripts 中定义一些符合项目的命令，这样方便我们在项目中迭代和维护

{
  ...
  "scripts": {
    "build-css": "sass scss/style.scss css/style.css"
  },
  ...
}

Scripts可以自动发现.\node_modules\下面路径，所以我们只要写运行代码就可以了，完成之后我们就可以通过npm/yarn去运行了

搭建一个简单的自动化工具

安装一些环境

这里我们先运行一下脚本，用于安装一个简单的测试服务器,便于之后去运行我们的项目

yarn add browser-sync --dev

对package.json改造

"scripts": {
    ...
    "serve": "browser-sync"
  },

运行一些该脚本

我们运行一下该脚本，这时browser会自动启动一个服务

image.png 但是这里要注意一点，如果我们在运行这个命令之前我们没有去做scss的编译的化，就不会出现样式，所以我们这里，可以进行一些小改造

"scripts": {
    ...
    "build-css": "sass scss/style.scss css/style.css",
    "preserve": "yarn build-css",
    "serve": "browser-sync"
  },

这样我们就可以在运行serve命令的时候，同时编译样式了 image.png

当然光有这写还不够，我们可以在 "build-css后进行添加一个--watch的参数，sass就可以在工作中监听文件的变化，当我们的文件发生改变，就可以正常更新

"scripts": {
    ...
    "build-css": "sass scss/style.scss css/style.css --watch",
    "preserve": "yarn build-css",
    "serve": "browser-sync"
  },

但是当我们运行 npm run serve的时候我们会发现出现了明显的阻塞情况，在等待文件的变化，就导致之后的文件没有办法执行通过，该怎么解决呢？

npm-run-all

这里我们可以通过npm-run-all进行实现

安装：

yarn add npm-run-all --dev

安装完毕之后，我们在对进行package.json一些改造

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-css": "sass scss/style.scss css/style.css  --watch",
    "serve": "browser-sync",
    "start": "run-p build-css serve"
  },

我们启动start命令之后，我们可以对scss文件进行一些修改

$body-color: rgb(7, 161, 233); rgb(233, 128, 7); 刷新一下页面我们可以看见，内容确实被提换上去了 image.png

当然我们还能在做一些改造


  "scripts": {
    "serve": "browser-sync --files \"css/*.css\"",
  },

这样就可以去监听css文件当我们的scss发生改变之后，不需要刷新页面就可以看到页面发生的变化了

总结

这里我们就简单做了一些内容编译了

  • NPM Scripts进行命令编写
  • browser-sync创建服务
  • npm-run-all进行多命令运行
avatar
文章
阅读
粉丝