从零开始为Web项目定制构建系统（一）——静态页面
source link: http://nakeman.cn/engineering/webprogramming/customize-build-system-from-bottom-up-1.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
相信很多人（包括初学者），无论是通过实践学习开发，还是真的开始一项商业软件项目，他们一般直接「使用现成的构建工具」作为新项目的构建工具。鲜有人细究构建工具的内部构成。原因有几：
第一，认为没有必要重发明轮子；
第二，构建工具内部与软件编程无关涉；
第三，成本；
Table of Contents
- 研究构建工具内部构成的意义
- 最简单的Web程序及构建系统
研究构建工具内部构成的意义
而我个人认为还是很有必要，这个道理有点像学前端不能只学应用框架（例如react vue），原生JS和浏览器API还是必修的；这是一个理由，了解构建工具内部结构，有助扫除「后继开发构建过程」出现的问题；
第二个理由，虽然构建工具的使用与编程是无涉的，但构建工具是用来「构建」目标程序，「构建工具」的特性与「程序」特性是一一对应的，「认识构建工具」是我们对自己的任务——程序组成的性质——深入认识的一个极好的侧面。
总得来说，构建工具的认识是很有必要的，它能提高我们的专业性——对自己的工具和任务有特别细致的了解。
如何开始？
虽然「学习构建工具的制作」很有意义，但是因为它很复杂，吓唬了不少人，研究怎么开始，是一个大问题。
由于 构建系统 与被构建的软件程序一对一，软件程序复杂，导致构建系统也比较复杂。故我以为，由简入繁是个不错的法子，从最简单的 Web项目 开始，然后不断 增加复杂度，一步一步的消化。复杂度由几个方面发展：
- 第一，Web项目功能增加；
- 第二，构建的效率的增加；
最简单的Web程序及构建系统
最简单直观的「Web编程」要数在本地编辑源文件，然后通过浏览器打开观测编写的效果，然而这只适应于编写静态页面，无法开发远程功能，这不是一个完整的项目，开发很受限。完整的项目开发环境至少还要配置一个http服务器。由此可见，一个「完整的基础的Web 项目编程或构建环境」是有一些基本的条件的，http服务器是其中之一。另一个则是启动http服务的构建工具（自动化任务）。
至此我们可开始构想最基本的Web程序，及它的构建系统的构成。
最基本的Web程序
最简单的Web程序，当然是只有一个静态页面的“程序”，例如功能非常简单，只显示“hello world!”，没有界面状态，没有服务器会话数据；所以也不使用第三方框架，不必有CSS预处理；开发协助上，没有单元测试，不进行语法检测等。
最基本的构建系统
以上已经揭示，我们的构建系统有一些基本的有机组成——http服务器，和功能任务——自动化任务，「组建构建系统」需第三方技术，这里我们直接使用Nodejs作基础技术，它提供了简单的http server软件包，也有npm script接口技术可作自动化任务。
构建系统（后可称build sys）是一定的形式和形态，它的结构组成和形式属性，就像一支Web应用程序，但将构建系统看成是一种存在形式来学，用 和制作，是前所未有的，后面会看到，这个认识是非常重要的。
创建最基本的构建系统
现在我们假想创建一个Web 项目，名为a-wgp（ a web gui program）。并且开发机器上已经安装了最新的Nodejs平台。并假设你已经掌握了基本 NPM的概念和使用。
build sys 最基础环境
最基础环境必定有一个项目工作目录，目录保存有构建系统的配置数据，和项目源码数据：
$mkdir a-wgp && cd a-wgp $ npm init -y $ mkdir src $ touch src/app.js src/index.html
安装 http服务器 （node 全局）
$ npm install http-server -g
配置 a-wgp build sys
在 package.json 中 配置构建系统的操作接口
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" ,
"start":"http-server src"
},
...
编辑index.html
正式编程，为应用程序写功能代码
... <body> <h1>hello world!!</h1> </body> ...
最基本build sys 文件系统构成
[keminlau@localhost a-wgp]$ tree -a
.
├── package.json
└── src
├── app.js
└── index.html
进行第一次构建使用
$ npm start
[keminlau@localhost a-wgp]$ npm start > [email protected] start /home/keminlau/react/a-wgp > http-server src Starting up http-server, serving src Available on: http://127.0.0.1:8080 http://192.168.10.120:8080 Hit CTRL-C to stop the server
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK