在现代 Web 开发中，前端自动化任务已成为一个必备的工具。Express.js 作为 Node.js 的一个 Web 框架，自然也能与前端常用的自动化任务工具 Gulp 配合使用。
本文将介绍如何在 Express.js 中使用 Gulp 完成常见的自动化任务。
安装 Gulp
要使用 Gulp，首先需要在项目中安装 Gulp 和 Gulp 插件。可以使用 npm 命令来完成安装：
npm install gulp gulp-sass gulp-autoprefixer gulp-concat gulp-uglify gulp-rename --save-dev
其中，每个插件的作用如下：
- gulp：Gulp 的核心模块。
- gulp-sass：用于编译 Sass。
- gulp-autoprefixer：自动添加 CSS 浏览器前缀。
- gulp-concat：将多个文件合并为一个文件。
- gulp-uglify：压缩 JavaScript 代码。
- gulp-rename：重命名文件。
创建 Gulp 任务
安装完成 Gulp 和插件后，我们需要创建 Gulp 任务。在项目根目录下创建一个名为 gulpfile.js 的文件，代码如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - --------------------- ----- ------------ - ----------------------------- ----- ------ - ----------------------- ----- ------ - ----------------------- ----- ------ - ----------------------- ------------------- -------- -- - ------ ---------------------------------------- ------------ ------------ ------------ -------------- --------------- --------------------- -------------- ------- ------ --- --------------------------------------- --- -------------------- -------- -- - ------ -------------------------------------- ----------------------- --------------- -------------- ------- ------ --- --------------------------------------- --- ------------------ -------- -- - ------------------------------------------ ----------------------- ---------------------------------------- ------------------------ ---展开代码
上面的代码创建了三个 Gulp 任务：
styles：编译 Sass，自动添加浏览器前缀，压缩 CSS，并重命名为*.min.css。scripts：合并 JavaScript，压缩 JavaScript，并重命名为*.min.js。watch：监视文件变化，自动执行上面两个任务。
使用 Gulp 任务
将上面的 Gulp 任务和 Express.js 项目结合起来，只需要在项目根目录下运行 gulp watch 命令即可。
但是，为了让 Express.js 能够在代码发生变化后自动重载，我们需要使用一个中间件来实现。
在项目根目录下运行以下命令安装 connect-livereload：
npm install connect-livereload --save-dev
在 Express.js 的 app.js 文件中引入 connect-livereload，并添加 Gulp 自动化任务：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ------------------------------ ----- --- - ---------- -- -- ------------------ --- ---------------------- -- -- ---- ----- ---------------------- ---------------- -------- -- - ---------------- --------- -- ---- -------- ---展开代码
现在可以在项目根目录下运行 gulp watch 和 node app.js 两个命令，即可完成自动化任务和 Express.js 应用的开发环境配置。
结语
本文介绍了如何在 Express.js 中使用 Gulp 自动化任务，实现了编译 Sass 和压缩 JavaScript 的功能，并结合 connect-livereload 实现了代码变化后自动重载的效果。这对于前端工程师来说，是一个快速开发和提高工作效率的简单而有效的工具，也是我们掌握前端自动化任务的一个必备技能。
完整的示例代码可以在 Github 中查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd8b46e46428fe9e721742
