文件的压缩、合并、内联、去缓存-移动端开发指南

当前位置:　首页>> 技术小册>> 移动端开发指南

### 项目要上线啦

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

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

### Css、Js的压缩

Css文件的压缩使用的是[gulp-uglify](https://www.npmjs.com/package/gulp-uglify)

Js文件的压缩使用的是[gulp-minify-css](https://www.npmjs.com/package/gulp-minify-css)

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

### Css、Js的合并

文件的合并使用的是[gulp-useref](https://www.npmjs.com/package/gulp-useref)，让我们简单的看下语法：

在index.html文件中

Css文件的合并如下：

``` html

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="widget/dialog/dialog.css">
<link rel="stylesheet" href="widget/loading/loading.css">

```

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

Js文件的合并如下：

``` html

<script src="static/js/zepto.js"></script>
<script src="static/js/deferred.js"></script>
<script src="static/js/callbacks.js"></script>
<script src="static/js/touch.js"></script>
<script src="static/js/util.js"></script>
<script src="widget/dialog/dialog.js"></script>
<script src="widget/loading/loading.js"></script>

```

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

### Css、Js的内联

文件的内联使用的是[gulp-inline-source](https://www.npmjs.com/package/gulp-inline-source)，让我们简单的看下语法：

`src/index.html`：

``` html
<link rel="stylesheet" href="css/index.css" inline>

```

执行`gulp build`命令后

`build/index.html`：

``` html
    <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>

```

### 去缓存

文件的去缓存使用的是[gulp-rev-append-all](https://www.npmjs.com/package/gulp-rev-append-all)，让我们简单的看下语法：

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

`build/index.html`：

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

```

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(四)

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(三)

Vue原理与源码解析

Vue.js从入门到精通(一)

Vue.js从入门到精通(四)

TypeScript和Vue从入门到精通(一)

vue项目构建基础入门与实战

vuejs组件实例与底层原理精讲

Vue面试指南

Vue3技术解密

Vue源码完全解析