自动化构建
作者：互联网
背景
-
一切重复工作本应自动化，自动化构建是前端工程化非常重要的组成部分。
-
自动化：就是通过机器去代替手工完成一些工作。
-
构建：把一个东西转换成另一个东西。
-
自动化构建：将开发过程中的源代码自动化的转换成生产环境中可以运行的代码或程序。
-
构建转换那些不被支持的特性，比如
scss和ECMAScript某些新语法在生产环境是不被支持的，但我们在开发过程中可以使用这些新特性，然后通过构建工具转换成生产环境能运行的代码，这样的好处能提高编码效率。
自动化构建体验
- 当我们直接编写
css的方式去完成网页的样式，但是我们希望通过sass增强css编程性，具体实现方式是， 在开发的时候我们添加一个构建的环节，这样我们在开发环节通过sass编写样式，再通过工具将scss构建为CSS。
案例
将 scss 文件构建成 css 文件
-
下载
sass第三方包yarn add sass -
安装完成后，我们可以在
node_modules/.bin目录下查看有个sass命令文件，在命令行中通过路径可以找到这个命令.\node_modules\.bin\sass -
输出
sass命令的帮助信息
-
执行
scss命令 => 构建.\node_modules\.bin\sass scss/main.scss css/style.css -
生成对应的
css文件
缺点
- 我们每次都需要重复去输入这些复杂的命令，而且在别人接手我们项目过后，他也不知道如何去运行这些构建的任务。
改进（NPM scripts）
-
我们需要做一些额外的事情去解决在项目开发阶段这些重复执行的命令，
NPM scripts就是解决这个问题的 -
scripts可以自动发现node_modules中的命令，所以我们不需要写完整的路径，直接使用命令的名称即可，命令定义完成后，我们即可通过npm或yarn来启动这个命令
-
启动命令
npm run build 或 yarn build // yarn 命令可以省略 run
NPM Scripts 是实现自动化构建工作流的最简便方式
-
安装
browser-sync模块，用于启动测试服务器去运行我们的项目，它能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面yarn add browser-sync -
在
scripts中添加一个serve命令，在这个命令中通过browser-sync把当前的目录运行起来（会首先指向当前目录的index.html文件）
- 启动命令
yarn serve
-
如我们在
browser-sync工作之前，并没有生成样式，此时browser-sync工作的时候就没有样式文件，那么我们需要启动serve命令之前让build任务先工作，可以借助NPM Scripts的钩子机制定义一个preserve，它会在serve命令执行之前自动去执行，此时再执行serve命令之前，就会自动先执行build命令，再执行对应的serve
-
我们可以为
sass命令添加一个–watch的参数，监听文件的变化，一旦文件中的代码发生改变，它就会自动被编译，但会一直阻塞在监听事件，不会去执行browser-sync命令
-
我们需要同时执行多个命令，可以借助
npm-run -all的模块实现yarn add npm-run-all
run-p 的命令同时执行多个命令(build在前，serve在后)
-
当我们修改 scss 文件的代码，通过 sass 命令构建生成的 css 文件中的代码也同步发生变化，说明 watch 已经生效了，但在浏览器中样式还没发生变化，说明浏览器中引用的还是旧的 css 文件，没有引用最新构建生成的 css 文件(需要手动刷新浏览器)
-
在
browser-sync .命令后面添加–files参数，这个参数可以让browser-sync启动过后监听项目下的文件的变化，一旦文件发生变化后，browser-sync会将这些文件的内容自动同步到浏览器，从而更新浏览器中的界面(不需要手动刷新浏览器)
标签：sass,sync,命令,构建,自动化,css,browser 来源： https://www.cnblogs.com/dwyWeb/p/16481270.html