一句命令快速合并 JS、CSS

  在项目开发环境下,我们会把 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 合并同理。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云服务器团队的专栏

腾讯云 CBS 性能测试用例参考

2、fio测试建议在空闲的、未保存重要数据的硬盘上进行,并在测试完后重新制作文件系统。请不要在业务数据硬盘上测试,避免底层文件系统元数据损坏导致数据损坏。

598130
来自专栏北京马哥教育

大神教你DIY高性能运维堡垒体系

概述 不怕出问题,就怕出问题找不到原因 运维团队一般会有个需求就是记录运维或者开发同事在服务器上的操作记录,比如进行一些常规审核或者是服务器被黑了、服务器日志被...

50360
来自专栏编程微刊

基于mpvue的小程序项目搭建的步骤步骤1. 检查下 Node.js 是否安装成功

21730
来自专栏技术翻译

如何在微服务之间共享和同步代码

微服务架构非常适合构建可扩展的代码库,具有更少的耦合,更好的关注点分离,更高的弹性,结合不同的技术,最重要的是,更好的模块化和构建它的组件的可重用性。

42900
来自专栏编程

使用GitHub搭建个人博客

今年使用GitHub搭建了自己的博客:kaze2017.com 我整理了一下搭建博客的过程,分为购买域名、准备环境、Git和GitHub、搭建博客、绑定域名、感...

340100
来自专栏CLS日志服务

腾讯云CLS日志服务应用

*LogListener: 是腾讯云日志服务提供的日志采集 Agent,通过在服务器上安装loglistener可以实时采集指定路径上的日志,并对日志原始数据进...

47510
来自专栏肖洒的博客

【Hexo】bat自动处理hexo命令

每次写新文章都得hexo new “xxx”,写完再hexo g -d,挺麻烦的。 就不能写一个脚本来自动执行吗?

14920
来自专栏happyJared

YApi - 高效、易用、功能强大的可视化接口管理平台

  YApi是由去哪儿网移动架构组(简称YMFE,一群由FE、iOS和Android工程师共同组成的最具想象力、创造力和影响力的大前端团队)开源的可视化接口管理...

91010
来自专栏Java技术栈

稍微有点难度的10道java面试题,你会几道?

1、jvm对频繁调用的方法做了哪些优化? 2、常见的攻击手段有哪些?如何防范? 3、restful api有哪些设计原则? 4、hessian是做什么用的?它的...

343100
来自专栏云市场·精选汇

如何巧妙解决小程序缓存问题,这5点你都知道吗?

清除缓存是我们开发者经常做的一个操作,我们需要在判断客户端在缺少缓存数据的情况下做出相应的处理

2.6K40

扫码关注云+社区

领取腾讯云代金券