什么是 gulp-attire-plus
gulp-attire-plus 是一款基于 gulp 构建工具的前端自动化工具，能够帮助前端开发者优化工作流程，节省时间。
gulp-attire-plus 提供了一组功能强大的任务（task），包括 CSS 和 JS 压缩、图片压缩、HTML 压缩、自动化雪碧图等等。
如何使用 gulp-attire-plus
使用 gulp-attire-plus 前，你需要先安装 Node.js 和 gulp。
接下来，我们来了解一下 gulp-attire-plus 的安装和使用。
安装
使用 npm 安装 gulp-attire-plus：
npm install gulp-attire-plus --save-dev
使用
在 gulpfile.js 添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------------------
---------------- -------- -- -
------ ---------------------------
-----------------
-----------------------------
---
--------------- -------- -- -
------ -------------------------
----------------
----------------------------
---
------------------ -------- -- -
------ ----------------------------
-------------------
--------------------------------
---
------------------- -------- -- -
------ -------------------------------------
--------------------
--------------------------------
---
-------------------- -------------------- ----- -------- -----------这个配置文件定义了四个任务：CSS 压缩 (css)、JS 压缩 (js)、图片压缩 (image) 和自动化雪碧图 (sprite) 。其中 atti.css()、atti.js()、atti.image()、atti.sprite() 分别是 gulp-attire-plus 里面的函数，表示执行 CSS 压缩、JS 压缩、图片压缩、自动化雪碧图的任务。
在终端里输入以下命令：
gulp
即可执行默认的任务。
压缩 CSS 和 JS 文件
使用 gulp-attire-plus 提供的 css() 和 js() 函数，可以很方便地压缩 CSS 和 JS 文件。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------------------
---------------- -------- -- -
------ ---------------------------
-----------------
-----------------------------
---
--------------- -------- -- -
------ -------------------------
----------------
----------------------------
---
-------------------- -------------------- -------压缩图片
使用 gulp-attire-plus 提供的 image() 函数，可以很方便地压缩图片文件。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------------------
------------------ -------- -- -
------ ----------------------------
-------------------
--------------------------------
---
-------------------- ------------------------自动化雪碧图
使用 gulp-attire-plus 提供的 sprite() 函数，可以很方便地处理雪碧图。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------------------
------------------- -------- -- -
------ -------------------------------------
--------------------
--------------------------------
---
-------------------- -------------------------总结
gulp-attire-plus 是一款强大的前端自动化工具，能够帮助前端开发者简化工作流程、提高开发效率。
在使用 gulp-attire-plus 的时候，我们应该了解其基本使用方法，可以更好地利用它提供的功能来优化我们的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556a981e8991b448d372e