基于NPM Scripts完成简单的自动化构建---入门

自动化构建简介

• 什么是自动化：

   机器代替手工完成一系列工作。
  

• 什么市构建：

   转换，
  

• 什么市自动化构建工作流:

   指把我们开发阶段写出来的源代码自动化转换成生产环境中可以运行的代码或者程序。
  

• 自动化构建简介作用：

    1.脱离运行环境兼容带来的问题
    2.使用提高效率的语法、规范和标准
  

• 最典型的应用场景

   我们开发网页应用时，使用
   1.ECMAScript Next:提高编码质量
   2.sass :来增强css的可编程性，
   3.模版引擎:来抽象页面中重复的html
   这些用法在浏览器中是不被支持的，这样自动化构建工具就派上用场了～
  

所以也就是我们通过自动化构建工具，将那些不被支持的特性，转化成能够直接运行的代码，这样大大提高我们开发的效率。

自动化构建的便捷之处

下面是我们通过css 来编写样式，

但是我们如果想通过sass/less 来增强css的编程性应该怎么办呢？

	在开发时通过构建的环节，这样让我们在开发的环节可以通过sass/less 来编写，然后通过工具将sass构建为css

sass 在一个项目中并不能直接使用，下面我们借助sass官方提供给的sass模块来使用，我们作为开发依赖来安装

$ yarn add sass --dev
// 指定一个sass的输入路径 一个css 的输出路径
$ ./node_modules/.bin/sass scss/main.scss css/style.css

上述呢，我们是需要一个一个对应的去开发央样式文件，但是在开发过程中每一个样式文件都去通过命令行来开发样式文件，过于繁琐，不适合项目转移，这样我们就可以通过npm scripts来解决这个问题

我们可以借助NPM Scripts 来定义一些与开发过程有关的脚本命令，这样就可以这些命令和项目一起维护， 所以我们在开发的过程中最好的方式局势通过NPM Scripts 的方式来包装我们的构建命令，那要怎么做呢？

• 在package.json 文件中，去添加scripts 字段
  
  我们可以通过添加
  那下面我们来说一下NPM Scripts–

NPM Scripts

是实现自动化构建工作流的最简方式

那我们来简单的实现一下，如何为自动化实现项目构建？

1. 安装一下browser-sync 模块，用于启动测试服务器，去运行项目

$ yarn add browser-sync --dev

2. 在package.json中添加serve命令

3. 执行一下serve 命令

$ yarn serve

4. 此时就会打开一个网页
   
   如果我们在生成网页之前没有没有生成css文件那么我们的样式文件sass 将不会执行，那么我们防止执行serve命令时没有生成css文件，我们额可以利用NPM Scripts 的钩子机制，

5. 在package.json文件中添加preserve命令
   

6. 我们可以通过–watch 来添加监听，一旦代码发生改变则自动会编译
   
   但是这个时候我们运行会发现 运行堵塞住了，会一直等待变化不会继续向下执行，这时候我们就可以借助 npm-run-all 这个模块

7. 安装 npm-run-all 模块

$ yarn add  npm-run-all --dev

8. 然后我们就在package.json 中添加
   然后我们再次运行 ,就可以啦

 $ yarn start

添加
 "serve": "browser-sync . --file \"css/*.css\"",
 可以使browser-sync 启动后，监听项目中文件的变化，文件变化后自动同步到浏览器，更新浏览器界面，及时查看效果

好啦～所以我们现在就基于NPM Scripts 完成了一个简单的自动化构建。