简介
Spon是一个基于gulp自动化构建工具的前端项目自动化构建解决方案，其基于配置文件快速搭建前端项目自动化构建流程，集成了CSS预处理器、前端资源压缩、代码检测等常见前端开发过程中的工具。
安装
通过npm来安装spon：
npm i spon -g
安装成功后，通过下列命令来验证安装的版本信息
spon --version
创建项目
假设您已经安装好了Spon，下面来快速创建一个Spon项目。
运行下面的命令
spon tpl add my-project https://github.com/d-band/spon-template-default.git
其中的my-project可以替换成您自带的项目目录名称，该命令会从https://github.com/d-band/spon-template-default.git这个地址中获取一个默认的模板项目。
完成后，进入项目目录
cd my-project
安装相关依赖
npm install
启动项目
spon server
通过浏览器访问：http://localhost:9000 ，您将看到Spon已经为您构建好的第一个Spon项目。
构建命令
Spon命令行使用类似于gulp的构建流程，通过配置构建完成项目自动化构建。
spon build：构建线上dist文件夹spon release：构建线上dist文件夹，并把dist文件夹上传到CDNspon server：启动本地开发服务
下面是一个构建代码压缩，启动热更新的示例：
-- -------------------- ---- -------
-- -----------
-------------- - -------- ------ -
--------------- ----------- ------- -
------ -------- -- -
------ -----------------
----------------
--------------------------
-----------------
------------------------------
---------------------------
-
-- -
---- ---------------------------------
----- --------------------
---
--
-- ----------------
----- ---- - ----------------
----- --- - ----------------------------------- -----------------
----- -------- - ---------------------
----- -------- - ---------------------
----- ---- - ----------------
----- -------- - -----------------------
----- -------- - -----------------------
--- ---- - --- -------------- -
----- --------------
----------- --- -------- ---- -------- ----
----
---------
--------
---
-- -------
-----------------可以看出，Spon提供了一个类似gulp的构建流程，同时将配置的gulp插件集成在了Spon插件环境中。Spon的插件定义可以通过一个JS文件来定义，并且构建的状态可以打印输出到控制台，方便开发人员进行调试。
高级特性
Spon在项目自动构建方面支持许多高级特性，我们将列出其中的一些。
多语言支持
在项目开发过程中，多语言支持是非常必要的，Spon可以轻松帮您实现此功能。在模板或代码中，您可以使用<%= _(text) %>或<%- _(text) %>来指定文本的多语言版本。您还可以在config中配置对应的语言。例如：
-- -------------------- ---- -------
-- ---------
------------------ -
----- ---------
----- ---
----- -------- -- -
-------------------------
-
-- -------- -- -
------ ---------------------------
-- -
---- ------------------------------------------------
-------- -
----- --------------
----- --------- ---------
-------- ----
-
---// 读取多语言文件内容 const lang = sponUtil.lang.readAll(path.join(__dirname, '../client/lang'), locale)
options部分是一个配置对象，其中lang属性是可选项，它指定了您支持的语言列表，extract属性是可选项，它指定了您是否从源代码自动提取多语言短语。
构建配置
通过在项目配置文件中增加spon-conf.js,可定制构建流程。例如下例：
-- -------------------- ---- -------
-- --------
-------------- - -------- ------ -
----------------- ------- ----- ---------- -------- --- ------- -
------ -------- -- -
------ ----------------- - ------- ----- --
-----------------
------------ ------------- - ------------------------------ --
--------------
------------------------- ---------------- -------------
------------------------- ---------------- -------------
--------------------------- ------------------ -------------
------------------------------------------
--------------------------
------------------- -------------- ------ ---- ---
------------------
--------------- ----
------ ----------------------------
--------- -----
--------- -----
------------ -------- ---------- -
------ ---------------
-
---
- ------------- -------- ---
--------------------------
----------------------- - -----------------------
-
---
--自定义命令注册
如果您想要使用自己的命令，只需通过以下代码：
-- -------------------- ---- -------
-- -------
---------------------------------
----- ------- -- ----
------ ----- ------ -- ------
------------ ------- -- ------
-------- -
-- ---
----- ------- ----- --- ------
--
-- -----
------- ---------- -
----------------- ------
-
---结论
随着前端项目越来越庞大且更复杂，自动化工作将会成为前端工程师们必须掌握的技能之一。使用Spon可以快速搭建自动化流程，提高生产效率，避免出现常见的错误，同时也使我们的工作更加愉快舒适。在未来的开发中，熟练掌握Spon将会为前端项目开发带来巨大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709f8ccae46eb111f01e