概述
gulp-tempos 是一种基于 Gulp 构建系统的前端构建工具，它的主要目标是方便快捷地将多种文件类型转换为 JavaScript 程序代码以及将多个 JavaScript 程序代码合并为一个文件。本文将介绍如何使用 gulp-tempos 及其相关工具来进行前端构建。
安装
在项目根目录下执行以下命令进行安装：
npm install --save-dev gulp gulp-tempos browserify vinyl-source-stream gulp-rename
其中：
gulp是Gulp构建系统的核心库。gulp-tempos是我们要使用的前端构建工具。browserify是将多个 JavaScript 文件require合并为一个的工具。vinyl-source-stream可以把browserify的输出转换为Gulp可以处理的 Vinyl 对象。gulp-rename可以更改文件路径或文件名。
使用
使用 gulp-tempos 从 src 目录编译代码到 dist 目录：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------
----- ------ - -------------------------------
----- ------ - -----------------------
----- ---------- - ----------------------
-------------------- -- -- -
------ ---------------------------
---------
--------------------------
------------------------------
---其中，
- 我们使用
browserify将多个 JavaScript 文件require合并为一个。 - 使用
source将browserify的输出转换为Gulp可以处理的 Vinyl 对象。 - 使用
gulp.dest将转换后的文件输出到dist/js目录下。
我们还可以通过下面的代码进行更多的配置：
gulp.task('tempos', () => {
return gulp.src('./src/**/*.temp')
.pipe(tempos())
.pipe(rename({extname: ".js"}))
.pipe(gulp.dest('./dist/js'));
});示例
假设我们有如下的代码：
-- -------------------- ---- -------
------- -------------------
---- ------------
------------------
----------------------
------
---------
--------
--- -------- - -------------------------------
------------------------------------ -------- ------------ ------------
---------通过 gulp-tempos 我们可以将 x-temp 类型的模板文件，转换为 JavaScript 代码：
-- -------------------- ---- -------
--- ------------ - ----------------- -
--- ---------- - ---
---------- -- --- ---- ---------------- ----- - --------------- - -------- ---- - --------------------- - ------- ----------
------ -----------
--
-- ------- ------ --- ---------- -- ----------- -
----------------- ---------- -------- --- -
------ -
--------- ------------
--
---
- ---- -- ------- ------ --- ----------- -- --------------- -
-------------- - -
--------- ------------
--
- ---- -
-------------------- - -
--------- ------------
--
-转换后的 JavaScript 代码可以通过其他 JavaScript 文件 require 进来使用。
结语
在实际的前端项目中，对于大型的 JavaScript 应用程序来说，使用 gulp-tempos 进行前端构建可以提高代码的可维护性和可读性。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573ee81e8991b448e9cf9