一句命令快速合并 JS、CSS

jerry HTML 2016年01月17日收藏

　　在项目开发环境下，我们会把 JS 代码尽可能模块化，方便管理和修改，这就避免不了会出现一个项目自身 JS 文件数量达到 10 个或者更多。

　　而项目上线后，会要求将所有 JS 文件合并为 1 个或者几个，手动的操作虽然也不是问题，但每次修改更新都要手动操作合并一遍，这就肯定是个噩梦了。

　　这种情况下，一些工具也就随之产生，比如在线合并，一些网站提供js文件上传，然后合并，但这还是很麻烦，如果开发环境没有网络呢？

　　这会我就想到了 windows 系统下的 cmd 里的 copy 命令，它虽然是个复制的功能，但实则也是可以实现合并文件的需求，下面就看下这句代码：

copy a.js+b.js+c.js abc.js /b

　　相信不会太多编程的人阅读上面那句代码也能大致读懂意思：通过 copy 命令将 a.js b.js c.js 合并为一个 abc.js，最后的 /b 表示文件为二进位文件，copy 命令的其它参数可以在 cmd 里输入 copy /? 学习，这里就不再细述。

　　说到这里，其实 windows 本身就可以完成我们的需求，也不用安装什么其它工具了，下面我们要做的就是将这一切操作更简单。

　　我们在项目存放 JS 的文件夹下新建一个 TXT 文件，将代码复制进去，并修改需要合并哪些文件，最后保存并将 TXT 修改为 BAT 后缀，如：

copy core.js+hros.app.js+hros.appmanage.js+hros.base.js+hros.copyright.js+hros.desktop.js+hros.dock.js+hros.folderView.js+hros.grid.js+hros.maskBox.js+hros.navbar.js+hros.popupMenu.js+hros.searchbar.js+hros.startmenu.js+hros.taskbar.js+hros.uploadFile.js+hros.wallpaper.js+hros.widget.js+hros.window.js+hros.zoom.js+templates.js+util.js core.min.js /b

　　接下来我们双击下那个 BAT 文件，看到效果了吧？这就是我们想要的。以后每次上线前，只需双击下这个文件，系统就会自动合并并生成一个合并好的文件，比起其它什么工具，这个的效率简直无法直视。

　　如果你本地还安装过 UglifyJS 这个工具，可以在代码后面加一句压缩的代码，如：

copy core.js+hros.app.js+hros.appmanage.js+hros.base.js+hros.copyright.js+hros.desktop.js+hros.dock.js+hros.folderView.js+hros.grid.js+hros.maskBox.js+hros.navbar.js+hros.popupMenu.js+hros.searchbar.js+hros.startmenu.js+hros.taskbar.js+hros.uploadFile.js+hros.wallpaper.js+hros.widget.js+hros.window.js+hros.zoom.js+templates.js+util.js core.min.js /b
uglifyjs core.min.js -m -o core.min.js

　　这样每次合并好后就自动压缩了，又省了一步操作。

　　CSS 合并同理。