针对移动端的前端工作流(11)—文件的压缩、合并、内联、去缓存

项目要上线啦

以上讲的都是在开发时候会用到的功能，现在项目要上线啦，我们进行最终的构建。

执行gulp build命令，会在根目录下建立build目录，build目录里就是我们最终要上线的内容。

Css、Js的压缩

Css文件的压缩使用的是gulp-uglify

Js文件的压缩使用的是gulp-minify-css

在build目录中你可以找到压缩后的文件，有意思的是，即使一些文件你采用了合并的形式，照理说应该不会再单独压缩这些文件了，但是还是给你生成了一个单独压缩后的文件，这是因为还不能智能的判断出哪些文件合并或是内联了，所以就将所有的css、js文件又单独压缩了一遍。

Css、Js的合并

文件的合并使用的是gulp-useref，让我们简单的看下语法：

在index.html文件中

Css文件的合并如下：

  2. <!-- build:css combined/combined.css -->
  3. <link rel="stylesheet" href="css/base.css">
  4. <link rel="stylesheet" href="widget/dialog/dialog.css">
  5. <link rel="stylesheet" href="widget/loading/loading.css">
  6. <!-- endbuild -->

在注释内的css文件会合并成一个combined.css在build/combined文件夹

Js文件的合并如下：

  2. <!-- build:js combined/combined.js -->
  3. <script src="static/js/zepto.js"></script>
  4. <script src="static/js/deferred.js"></script>
  5. <script src="static/js/callbacks.js"></script>
  6. <script src="static/js/touch.js"></script>
  7. <script src="static/js/util.js"></script>
  8. <script src="widget/dialog/dialog.js"></script>
  9. <script src="widget/loading/loading.js"></script>
  10. <!-- endbuild -->

在注释内的js文件会合并成一个combined.js在build/combined文件夹

Css、Js的内联

文件的内联使用的是gulp-inline-source，让我们简单的看下语法：

src/index.html：

  2. <link rel="stylesheet" href="css/index.css" inline>
  4. <script src="js/index.js" inline></script>

执行gulp build命令后

build/index.html：

  2.     <style>@charset "UTF-8";.icon_lists,.sprite-list{margin-left:auto;margin-right:auto}.sprite{background-image:url("../img/sprite.png");background-repeat:no-repeat;background-size:4.04rem 2.44rem}.main{padding:.266667rem}.icon_lists{width:9.333333rem}.icon_lists li{float:left;width:1.333333rem;height:1.333333rem;text-align:center}.icon_lists .icon{font-size:.56rem;line-height:1.333333rem;margin:.133333rem 0;color:#333;transition:font-size .25s ease-out 0s}.icon_lists .icon:hover{font-size:1.333333rem}.base_list{text-align:center;font-size:.346667rem}.btn_wrap{margin-top:.266667rem}.sprite-list{width:8rem}.sprite{width:1.333333rem;height:1.066667rem;float:left;margin-top:.266667rem;margin-bottom:.266667rem}.sprite-item1{background-position:-1.586667rem 0}.sprite-item2{background-position:0 0}.sprite-item3{background-position:-1.346667rem -1.36rem}.sprite-item4{background-position:-2.933333rem 0}.sprite-item5{background-position:0 -1.36rem}.sprite-item6{background-position:-2.933333rem -1.2rem}</style>
  4.     <script>var Project=function(){var t=function(){var t=$(this);if(!t.hasClass("disabled")){t.addClass("disabled");var n={time:3};$.ajax({url:"http://wiki.xyzphp.com/t.php",type:"POST",data:n,beforeSend:function(){lnv.iconloading("#submit_btn")}}).done(function(t){t="string"==typeof t?JSON.parse(t):t,200==t.status?0===t.data.length&&lnv.alert({title:"提示",content:"没有数据",alertBtnText:"确定",alertHandler:function(){alert("点击了确定")}}):alert("error")}).fail(function(t,n,a){alert("error")}).always(function(){lnv.destroyloading("#submit_btn"),t.removeClass("disabled")})}},n=function(){$("#submit_btn").on("tap",t)},a=function(){n()};return{init:a}}();</script>

去缓存

文件的去缓存使用的是gulp-rev-append-all，让我们简单的看下语法：

在执行gulp build的时候，所有的引用资源都会加上MD5戳。

build/index.html：

  2. <script src="static/js/flexible.js?v=4474e0337b3aaeec9b5c6565e130f2e5"></script>