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

一句命令快速合并 JS、CSS的更多相关文章

  1. 【前端】一句命令快速合并压缩 JS、CSS

    引用自:一句命令快速合并 JS.CSS 在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到10个或者更多. 而项目上线后,会要求将所 ...

  2. Grunt的配置及使用(压缩合并js/css)

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

  3. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

  4. 利用nginx concat模块合并js css

    前言: nginx-http-concat模块是由淘宝网开发的,现在淘宝网合并js和css正是用这个模块,如链接http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min. ...

  5. 批处理/命令行合并js,递归合并子目录js文件

    for /r %%i in (*.js) do type "%%i">>xxx-all.js java -jar yuicompressor.jar --type js ...

  6. maven 压缩、合并 js, css

    转载自:http://blog.csdn.net/fangxing80/article/details/17639607 我们知道在 Web 应用开发中为了提高客户端响应速度,需要将页面使用的资源最小 ...

  7. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  8. 转:利用node压缩、合并js,css,图片

    1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...

  9. 引用:使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

随机推荐

  1. 配置jenkins,并把iOS包自动上传至fir.im

    安装jenkins,有两种方式 1.首先要安装 homebrew,利用homebrew来管理安装包十分方便,一条命令就可以 安装 homebrew命令 $ ruby -e "$(curl - ...

  2. Unitils集成DBUnit的问题-解决方案

    Unitils在集成DBunit时,如果数据库是mysql时,就会出现一些如下: org.unitils.core.UnitilsException: Error inserting test dat ...

  3. location.hash属性介绍

    location.hash属性介绍 例如URL: http://wwww.a.com/index#rhythmk 通过location.hash 我们将获取到 #rhythmk. 默认浏览器会滚动至i ...

  4. 读书笔记_Effective_C++_条款四十一:了解隐式接口和编译期多态

    从本条款开始,就进入了全书的第七部分:模板与泛型编程.模板与泛型在C++中是非常重要的部分,还记得本书第一章时,把C++视为一个联邦,它由四个州政府组成,其中一个政府就是模板与泛型了. 本条款是一个介 ...

  5. SVN分支与合并

    分支的基本概念就正如它的名字,开发的一条线独立于另一条线,如果回顾历史,可以发现两条线分享共同的历史,一个分支总是从一个备份开始的,从那里开始,发展自己独有的历史(如下图所示) ⑴创建分支 假设目前我 ...

  6. linux 环境变量设置及查看

    1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量hello $ export HELLO="Hello!" $ ech ...

  7. js替换指定字符串

    // var a = "212"; // var b = []; // for(var i=0;i<a.length;i++){ // if(a[i]=="1&qu ...

  8. Communication - 02.Call U

    App层 从大拇哥Click CallButton开始手机便已明白,主人这是要打电话.当然,你可以选择直接拨号,也可以通过ContactList,或者从通话记录着手.这些都只是UI的设计不同而已,终归 ...

  9. HMM 自学教程(六)维特比算法

    本系列文章摘自 52nlp(我爱自然语言处理: http://www.52nlp.cn/),原文链接在 HMM 学习最佳范例,这是针对 国外网站上一个 HMM 教程 的翻译,作者功底很深,翻译得很精彩 ...

  10. IOS高级编程之一:多点触摸与手势验证

    前段时间学习了IOS基础的一些控件的使用作为基础,现在开始学习一些高级编程的东西,手势处理器.文件I/O.定位.网络通信.多线程这些,分享一些学习的重点,还是很实用的. 今天就先介绍个简单点得,手势处 ...