简介
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：
npm install grunt-atlas-watch-multi-lang --save-dev
配置
创建 Gruntfile.js 文件，并将以下配置代码复制到文件中：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
----------------------- -
-------- -
---- ------
---------- ------ ------
-------- ---------
---------- -------
-
-
---
---------------------------------------------------
----------------------------- ----------------------------
--配置说明：
src：监视的源代码目录，默认为src。languages：需要监视的语言列表，默认为英文和中文。img_dir：源代码中存放图片的目录，默认为images。atlas_dir：生成图片图集的目标目录，默认为atlas。
使用
在配置完成后，在项目根目录执行以下命令开始监视多语言项目：
grunt
当源代码中的图片目录发生改变时，grunt-atlas-watch-multi-lang 将会在指定的目录下生成对应语言的图片图集。
示例代码
我们假设源代码目录为 src，语言列表为 ['en', 'zh']，图片目录为 images，目标图集目录为 atlas。
源代码结构如下：
src/
├─ index.html
└─ images/
├─ image_1.png
├─ image_2.png
└─ module/
├─ image_3.png
└─ image_4.png执行监视命令后，目标图集目录将会如下所示：
atlas/ ├─ en/ | ├─ images.png | └─ module.png └─ zh/ ├─ images.png └─ module.png
我们可以在 HTML 中引用对应的图片图集，例如：
<img src="atlas/en/images.png"> <img src="atlas/en/module.png"> <img src="atlas/zh/images.png"> <img src="atlas/zh/module.png">
总结
grunt-atlas-watch-multi-lang 是一个非常实用的前端开发便利工具，可以帮助我们监视多语言项目，并自动构建对应语言的图片图集。通过本文的介绍和示例，相信您已经掌握了如何使用它了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d9b81e8991b448db579