简介
grunt-atlas-watch-multi-lang 是一个前端开发便利工具，可以帮助我们监视多语言项目，并在当前语言发生改变时，自动构建当前语言对应的图片图集至 atlas 目录中。
安装
在安装 grunt-atlas-watch-multi-lang 之前，需要先安装 Node.js 和 Grunt。安装 Node.js 可以参考 Node.js 官网，安装 Grunt 可以参考 Grunt 官网。安装完毕后，在项目根目录执行以下命令来安装 grunt-atlas-watch-multi-lang：
--- ------- ---------------------------- ----------
配置
创建 Gruntfile.js 文件，并将以下配置代码复制到文件中：
-------------- - --------------- -
------------------
----------------------- -
-------- -
---- ------
---------- ------ ------
-------- ---------
---------- -------
-
-
---
---------------------------------------------------
----------------------------- ----------------------------
--配置说明：
src：监视的源代码目录，默认为src。languages：需要监视的语言列表，默认为英文和中文。img_dir：源代码中存放图片的目录，默认为images。atlas_dir：生成图片图集的目标目录，默认为atlas。
使用
在配置完成后，在项目根目录执行以下命令开始监视多语言项目：
-----
当源代码中的图片目录发生改变时，grunt-atlas-watch-multi-lang 将会在指定的目录下生成对应语言的图片图集。
示例代码
我们假设源代码目录为 src，语言列表为 ['en', 'zh']，图片目录为 images，目标图集目录为 atlas。
源代码结构如下：
----
-- ----------
-- -------
-- -----------
-- -----------
-- -------
-- -----------
-- -----------执行监视命令后，目标图集目录将会如下所示：
------ -- --- - -- ---------- - -- ---------- -- --- -- ---------- -- ----------
我们可以在 HTML 中引用对应的图片图集，例如：
---- -------------------------- ---- -------------------------- ---- -------------------------- ---- --------------------------
总结
grunt-atlas-watch-multi-lang 是一个非常实用的前端开发便利工具，可以帮助我们监视多语言项目，并自动构建对应语言的图片图集。通过本文的介绍和示例，相信您已经掌握了如何使用它了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d9b81e8991b448db579