前端开发中,我们经常需要处理图片的合并、压缩等操作,而 gulp 作为一种流式的构建工具,可以帮助我们更高效地完成这样的任务。而 werkint-gulp-task-sprites 则是一个针对 gulp 的 sprite 合并插件。本文将介绍如何安装和使用这个 npm 包。
前置条件
- 了解 gulp 的基础知识;
- 已安装 gulp。
安装
使用 npm 安装:
--- ------- -------------------------
用法说明
基本配置
在 gulpfile.js 中引入包以及相关模块:
----- ---- - ---------------- ----- ------- - ------------------------------------- ----- ----- - ----------------------- ----- ----- - ---------------------- ----- --- - -------------------- ----- ---------- - ---------------------------- ----- ------------- - - ------- ----------------------- -------- ------------- -------- -------- -------- ------------- -------- ------------- ------------ -------------------- -- -------------------- -------- -- - ------ - ---- -------------------------- - ----- ----- -- ---------------------- ----------------------------- --------------------------------------- --------------------------------------- -- ---
上述代码中,我们首先引入了 gulp 和 werkint-gulp-task-sprites 包,同时还引入了 cache、clean、rev、revReplace 等相关模块。
然后我们定义了 spritesConfig 对象,它包含了以下属性:
- imgSrc:需要合并的图片路径,可以使用通配符。
- imgDest:合并后图片的存放路径。
- cssDest:合成的 css 文件存放路径。
- imgName:生成的合并图片的名称。
- cssName:生成的 css 文件的名称。
- cssTemplate:生成的 css 文件模板,模板中包含了各个小图片的样式信息。
最后,我们定义一个 sprites 的 task,并在其中将图片文件读入流进行处理。cache 模块可以避免重复处理,提高效率。sprites 插件将读入的图片流转化为合成后的图片和 css 文件流。最后,两个流分别输出到 imgDest 和 cssDest 路径下。
使用 cache
在 sass 或者 less 的编译流里面插入这个插件时,可以使用 gulp-cached,如下所示:
----------------- -------- -- - ------ - ------------------------- -------------------- ------------------------ --------------- ------------------------------ -- ---
版本管理
我们可以使用 gulp-rev 来实现版本管理,让静态资源进行缓存:
---------------- -------- -- - ------ ---- --------------------- ------------ --------------- - ----- ---- -- ------------ ---------------------- --------------------- ---------------------- - --- ----------------------- -------- -- - ----- -------- - -------------------------------- ------ ---- -------------------- ------------------ --------- -------- --- ----------------------- ---
我们需要注意到,我们需要使用 rev.manifest() 来生成一个映射表来告诉 gulp-rev 如何定位到原始文件。
使用 gulp-rev-replace 完成 html 引用资源文件的版本修改:
----------------------- -------- -- - ----- -------- - -------------------------------- ------ ---- -------------------- ------------------ --------- -------- --- ----------------------- ---
具体例子
本例子基于 werkint-gulp-task-sprites 官方例子进行说明,假定已经安装好上述所述包和插件,并已配置好相关模块和路径。
在 src 下有两个文件夹 apple 和 banana,里面放着各有 4 张 png 图片,我们需要通过 gulp 打包生成相应的 css 和 png:
-- --------- -- ------ --------- -- -------- - -------------------- - -- ------ ------ ------- ------ - -------- - -------------------- ------ -- ------ ------ ------- ------ - -------- - -------------------- ------ -- ------ ------ ------- ------ - -------- - -------------------- ------ -- ------ ------ ------- ------ - --------- - -------------------- - ------- ------ ------ ------- ------ - --------- - -------------------- ------ ------- ------ ------ ------- ------ - --------- - -------------------- ------ ------- ------ ------ ------- ------ - --------- - -------------------- ------- ------- ------ ------ ------- ------ -
打包的配置文件为:
-------------------- -------- -- - ------ - ---- -------------------------- ---------------------- - ----- ----- -- ---------------------- ------ --------- -------- ------------- -------- ------------- ------------ ------------------------ -------- --- ------------ ---------- ------------------- --------------- -- - -------------------------- -- ---
注意在本例子中使用了 cach 已优化 gulp 处理速度以外,使用了 cssSpritesheetName 来修改 css 引用的图片名。
将完整代码打包成 pack 更新于 github 中:werkint-gulp-task-sprites-learning
总结
werkint-gulp-task-sprites 是一款实用的 gulp 插件,它可以帮助我们更加高效地完成小图合并成雪碧图的操作。本文结合生动的例子,详细介绍了 npm 包的安装和使用方法,同时也介绍了缓存和版本管理在使用中的技巧,希望读者能够更好地掌握并应用这个强大的工具,为自己的开发工作带来更高的效率和便利。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600671078dd3466f61ffde8f