前言
前端开发中，随着项目的不断壮大和前端工具的不断发展，我们需要管理的文件和代码也在逐渐增加，为了方便管理这些代码，我们需要一个良好的打包工具来打包我们的代码，这时候 shifter 就派上了用场。shifter 不仅可以打包 JS、CSS 等文件，还可以根据配置信息自动生成文档、zip 包等。
shifter 简介
Shifter 是一款轻量级的打包构建工具，它使用 YUI3 的构建系统，可以方便地将多个文件合并成一个文件、提取公共部分、压缩代码等，在前端开发中被广泛使用。Shifter 使用 NodeJS 的命令行工具，需要在终端下运行。
安装 shifter
Shifter 依赖 NodeJS 环境，如果你还没有安装 NodeJS，请先安装它。
安装命令：
npm install -g shifter
如果出现权限问题，可以使用 sudo 命令来安装。
shifter 配置文件
shifter 的配置文件是 package.json，通过配置 package.json 文件中的 build 来确定要生成的模块。
-- -------------------- ---- ------- - ------- ------------ ---------- -------- -------- - --------- - ------- --------- -------- ----------- -- ------------ ----------- -------- ------------ --------------- -------------------- ----------- --------------- ------------- ------------------ - -展开代码
source.path：指定源代码路径。source.files：指定源代码中需要编译的文件，可以用通配符表示。buildPath：指定编译后的文件路径。files：指定编译后需要打包的文件，可以用通配符表示。globalConfig：指定全局配置文件路径。tempPath：指定临时文件夹路径，用于生成中间文件。configPath：指定配置文件路径，用于对不同的模块进行定制化配置。
编译 JS 文件
配置好 package.json 文件后，就可以开始编译文件了。
shifter这个命令会把 source.path 中指定的 JavaScript 文件编译成适合产品环境使用的代码并且存放在 buildPath 中。同时，还可以使用 -v 参数查看编译过程中的详细信息。
shifter -v
打包文件
有时候我们需要把多个文件合并成一个文件来减少 HTTP 请求，shifter 非常适合做这个事情。只需要在 package.json 中配置好 build.files 就可以了。
-- -------------------- ---- ------- - ------- ------------ ---------- -------- -------- - --------- - ------- --------- -------- ----------- -- ------------ ----------- -------- ------------ --------------- -------------------- ----------- --------------- ------------- ------------------ - -展开代码
然后在终端中运行：
shifter build这个命令会把 build.files 中指定的 JavaScript 文件打包成一个文件，并且压缩代码存放在 buildPath 中。打包完成后，可以使用 shifter list 命令查看打包后的文件列表。
自动生成文档
shifter 还支持自动生成 API 文档，只需要在 build.globalConfig（全局配置文件）中加入以下代码：
YUI({ logInclude: { TestRunner: true } }).use('test', function(Y) { var runner = Y.Test.Runner; new runner({ testName: Y.config.name, delay: 100, filters: [] }).run(); });
然后在终端中运行：
shifter doc这个命令会在 buildPath 中生成一个名为 docs 的文件夹，里面包含了生成的 API 文档。
结语
以上就是 shifter 的基本使用方法，该工具可以帮助我们方便地管理前端项目代码，让前端开发更加高效快捷。学会使用 shifter，可以让我们在前端开发中更加得心应手！如果需要更多详细使用信息，可以参考 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77191
