前言
在前端开发过程中，提高效率和减少重复劳动是非常重要的，而 gulp 作为前端构建工具，在这方面有着得天独厚的地位。但对于刚刚接触前端开发的小白来说，gulp 的使用可能还有些困难。不过没关系，今天我们来介绍一款轻量级的 gulp 插件—— gulp-quick，为初学者提供 gulp 构建工具的简单实现。
gulp-quick 是什么？
gulp-quick 是一款包装了 gulp 常用插件的工具。它内部已经预装了一些常见的 gulp 插件，例如：
gulp-jshint：代码检查gulp-concat：代码合并gulp-uglify：代码压缩gulp-rename：文件重命名gulp-imagemin：图片压缩gulp-clean-css：css 文件压缩
如此一来，我们在开发过程中只需安装 gulp-quick，就可以省去一个个安装这些插件的步骤。
如何使用 gulp-quick？
安装 gulp-quick
在使用 gulp-quick 前，需要先安装它。
我们使用以下命令将其安装到项目依赖中：
npm install gulp-quick --save-dev
创建 gulpfile.js 文件
接下来，在项目根目录下创建 gulpfile.js 文件。
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----- - ---------------------- -- ------ -- --- -- ---- --------------- - ---------- - -- --- -
在文件中我们需要先导入 gulp 和 gulp-quick。
上述代码中 exports.default 的值为默认任务（可以直接使用 gulp 命令运行的任务），这里我们将其设置为一个空函数。
编写任务函数
在 gulpfile.js 文件中，我们需要编写不同的任务函数。
例如，我们需要拼接一个 src 目录下的所有 js 文件并压缩输出（实现一个简单的 js 构建），我们可以这样写：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------
-- ------
-------- --------- -
------ -------------------------- -- -- ------ ------ --- --
----------------------------- -- ------------ ------ ---
--------------------- -- ----
---------------------------- -- --- ------- ---
-
-- ----
--------------- - ---------- -
------------
------- -- -- --
-
-运行任务
在编写好以上代码后，我们可以使用以下命令来运行构建：
gulp
这样我们就完成了一个简单的构建。值得注意的是，当我们运行构建时，gulp-quick 会自动为我们根据代码修改自动重构（即自动监测文件变化）。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/94067