在项目开发环境下,我们会把 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. CSS技巧(二):CSS hack

    什么是CSS hack CSS hack由于不同的浏览器,比如IE6,IE7,Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需 ...

  2. mysql 性能优化 配置优化

    http://download.csdn.net/album/detail/1397/2

  3. Adobe Flash Builder 4.6破解方法

    http://hi.baidu.com/cm186man/blog/item/148658ce557c0323b700c853.html 1.到Adobe官网下载FlashBuilder 4.6,有简 ...

  4. 【软件分析与挖掘】A Comparative Study of Supervised Learning Algorithms for Re-opened Bug Prediction

    摘要: 本文主要是评估多种监督机器学习算法的有效性,这些算法用于判断一个错误报告是否是reopened的,算法如下: 7种监督学习算法:kNN,SVM, SimpleLogistic,Bayesian ...

  5. WCF 遇到的问题

    1.只有项目的net版本2.0以上的才可以引用到wcf的类库 2.HTTP 错误 404.17 - Not Found  映射问题   WCF服务建立好,提示这个错误,缺少映射问题,要将应用程序池和项 ...

  6. Kafka集群部署

    一. 关于kafka Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键 ...

  7. SQL Server 存储(8/8):理解数据文件结构

    这段时间谈了很多页,现在我们可以看下这些页在数据文件里是如何组织的. 我们都已经知道,SQL Server把数据文件分成8k的页,页是IO的最小操作单位.SQL Server把数据文件里的第1页标记为 ...

  8. @import和link的区别

    @import和link的区别 1.link语法结构    <link href="CSSurl路径" rel="stylesheet" type=&qu ...

  9. JS魔法堂:IE5~9的Drag&Drop API

    一.前言     < HTML5魔法堂:全面理解Drag & Drop API>中提到从IE5开始已经支持DnD API,但IE5~9与HTML5的API有所不同,下面我们来了解一 ...

  10. Rest(Restful)风格的Web API跟RPC风格的SOAP WebService--这些名词都啥意思?

    经常看到这些词汇,也有baidu或google过,但记忆里总是模糊,不确定,以至于别人问及的时候,总说不清楚.开篇随笔记录下.大家有补充或者意见的尽请留文. 本文顺序: 一.Rest(Restful) ...