简介
front-end-workflow 是一个基于 Node.js 和 Gulp 的前端自动化构建工具，可以帮助前端开发者自动化完成一些繁琐的工作，如合并压缩代码、图片的压缩及精灵图生成等。它通过一系列的任务将前端项目最终输出到指定文件夹中。
安装
我们需要先安装 Node.js 和 npm，在控制台执行以下命令安装 front-end-workflow:
--- ------- ------------------ ----------
使用
使用 front-end-workflow 的方法很简单：
- 在项目根目录新建一个
gulpfile.js文件 - 引入
front-end-workflow - 配置你的任务
- 执行任务
下面我们详细解释每一个步骤。
引入
从你的 node_modules 目录中引入 front-end-workflow：
--- ---- - ---------------- --- -------- - ------------------------------
配置任务
前端自动化构建工具的核心是任务，而 front-end-workflow 已经封装好了一些任务，你只需要根据你的项目需要来配置它们。
以下是一个简单的配置示例：
---------------- ---------- -
------ ---------------------------
------------------------------------
---------------------------
--------------------------------
---
--------------- ---------- -
------ -------------------------
------------------------------------
------------------------
-------------------------------
---
-------------------- ------- -------以上的代码定义了三个任务：'css'，'js' 和 'default'。其中，'default' 是默认任务，即在控制台中输入 gulp 命令执行的任务。
执行任务
在控制台输入 gulp 命令，就会自动执行 'default' 任务。
如果你只想执行某个任务，可以使用以下命令：
---- --------
例如，只执行 'css' 任务：
---- ---
更多任务
除了上述示例中的任务外，front-end-workflow 还支持以下任务：
frontend.sprite
生成精灵图。
------------------- ---------- -
------ ---------------------------
-----------------------
----- ------------------
------ ---------------
-------- -------------------------
------- --------
---
--------------------------------
---frontend.image
压缩图片。
------------------ ---------- -
------ -----------------------
-----------------------
--------------------------------
---frontend.html
压缩 HTML。
----------------- ---------- -
------ ------------------------
----------------------
----------------------------
---frontend.browserSync
开启本地服务器，自动刷新。
------------------------ ---------- -
----------------------
------- -
-------- ---------
-
---
---总结
front-end-workflow 是一个强大而易用的前端自动化构建工具，在项目开发的过程中可以帮助我们节省大量的时间和精力，同时还能提升项目的质量和效率。如果你正在寻找一款好用的工具来优化你的项目构建，那么不妨尝试一下 front-end-workflow。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005596081e8991b448d6d1b