你不知道的几个前端小工具

title

Hex 为您分享 / Github: @hex-ci

目录

  • 前端编译工具
  • 自动化部署工具
  • 附赠内容 😆

前端自动化编译工具

基于 Gulp 开发，主要包括：

  • 合并文件（两种合并方式）
  • 图片压缩优化
  • CSS 预处理和压缩
  • JS 预处理和压缩
  • 代码格式和规范检查
  • 资源文件添加版本号
  • 内联 JS 和 CSS 压缩
  • 资源发布到 CDN
  • 自动生成 SourceMap
  • 增量编译

合并文件

第一种方式



<script src="/static/js/a.js"></script>
<script src="/static/js/b.js"></script>
<script src="/static/js/c.js"></script>
<script src="/static/js/d.js"></script>

将会生成一个合并后的文件，并替换成类似这样：


<script src="/static/js/com_cb_xxxxxxxxx.js"></script>

合并文件

第二种方式


<script src="/static/js/lib.js"></script>
					

// lib.js
(function() {
  var srcPath = '/static/js/';

  document.write('<script src="' + srcPath + 'a.js"><\/script>');
  document.write('<script src="' + srcPath + 'b.js"><\/script>');
  document.write('<script src="' + srcPath + 'c.js"><\/script>');
  document.write('<script src="' + srcPath + 'd.js"><\/script>');
}());

资源添加版本号


<script src="/static/js/demo.js"></script>
					

<script src="/static/js/demo.js?v=cf6d21e.js"></script>

内联压缩


<body>
<script type="text/javascript">
function demo() {
  .....
}
</script>
</body>
					

<body>
<script type="text/javascript">function demo(){.....}</script>
</body>
内嵌 PHP 代码的 script 不会压缩，当然你可以通过设置 force-compress 属性来强制压缩

自动发布到 CDN


<script src="/static/js/demo.js"></script>
					

<script src="//cbshowhot.cdn.changbaimg.com/static/js/demo.710a2da.js"></script>

为标签增加 nocdn 属性则不会被发布到 CDN，例如：


<script src="/static/js/demo.js" nocdn></script>

其他工具

  • 资源生成 Data URI 并自动复制到剪贴板，例如： 
    gulp datauri -f "/your/path/demo.png"

    下列内容会自动复制到剪贴板：

    data:image/png;base64,iVBORw0KG......
  • 上传文件到 CDN，并生成永久唯一 URL，例如： 
    gulp alioss -f "/your/path/demo.png"

    生成：

    http://cbshowhot.cdn.changbaimg.com/-/19bb85c1291945b1/demo.png

其他工具

  • Cocos2D 资源发布到 CDN 
    gulp resource

    生成：

    http://cbshowhot.cdn.changbaimg.com/-/0c952f5370416f21/resource.js

举个 🌰

部署工具

问题：现有 svn up 的部署方式有一定的局限性

解决：改为主动发布的形式

主要分为四步：

  1. 编译项目
  2. 打包上传到回归机（测试机）
  3. 从回归机 rsync 到线上服务器
  4. 如有问题回滚到上一版本

部署工具

编译项目前先做文件对比

部署工具

发布到回归机（测试机）

如果测试有问题可以立即回滚

部署工具

最后通过 rsync 同步到线上

让 SVN 分支用起来像 GIT 分支

首先需要把 SVN 目录结构修改成经典分支模型

让 SVN 分支用起来像 GIT 分支

然后创建类似这样的本地目录

|-- root
|
|---- project -> ./project_trunk/
|---- project_trunk
|---- project_branch_name_1
|---- project_branch_name_2
|---- project_.....
很明显，svn trunk 要 checkout 到 project_trunk 目录下

让 SVN 分支用起来像 GIT 分支

进入 project 目录，可以自由切换分支：

sh ./project/branch_switch.sh

让 SVN 分支用起来像 GIT 分支

进入 project 目录，可以创建分支：

sh ./project/branch_create.sh 分支名

可以合并分支到主干：

sh ./project/branch_merge.sh trunk

也可以 checkout 其他分支：

sh ./project/branch_checkout.sh 分支名

所有操作都在 project 目录下完成

THE END

谢谢！