响应式网站设计（11）-项目的打包发布

朴灿烈づ我的快乐病毒、 2021-09-16 04:50 305阅读 0赞

## 项目的打包发布 ##

### 项目发布流程 ###

直接把文件发给运维人员，让运维人员发布相关的代码分支，拷贝代码到生产服务器上发布目录。

### 项目发布前的代码优化 ###

1、压缩；  2、合并；  3、增加版本号等等；

在压缩之后，线上的代码比较小，提高网页的加载速度。压缩后的代码，不同于常规的代码，其他人员不能一眼看出来是什么作用，有效的保护了知识产权。

### 打包发布 ###

打包发布，推荐网址：[https://javascript-minifier.com/][https_javascript-minifier.com]，如果手动压缩，可以直接将代码拷贝过来即可。

![70][]

该网站除了js文件压缩之后，我们还可以压缩css文件、JPG文件，PNG文件等等。但是，对于手动操作，将会是费时费力的。现在，推荐使用项目打包工具，比如：***Grunt、Gulp、Webpack***等等。

### 代码打包主流工具 ###

**三者简单对比：**

***Grunt、Gulp*** 是自动化构建工具；在自动化构建方面，通常使用Gulp（较Grunt更为好用，性能更优）；

***Webpack***是静态资源打包工具；在资源打包发布方面，使用webpack，功能更加全面，版本更新；

但是，对于简单的网页而言，使用三者中任意一个均可以。

### gulp.js使用方法 ###

Gulp 中文网网址：[https://www.gulpjs.com.cn/][https_www.gulpjs.com.cn] ；Gulp优点：易于使用，快速构建，插件高质，易于学习。

**1、gulp安装**

（1）初始化一个package.json文件，运行指令：

npm init

（2）然后，安装gulp，查看是否安装成功，运行指令：

npm install gulp --save-dev
    gulp -v

（3）安装gulp常用的依赖，运行指令（安装多个依赖包，只需用空格隔开即可）：

npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

（4）安装完成后，在项目中创建gulpfile.js文件

在gulpfile.js文件中，首先声明依赖的加载项，而后声明gulp任务，其中包括任务名，任务具体的行为（函数）。

var gulp = require("gulp");
    gulp.task('hello',function () {
        console.log("在gulpfile.js文件中，首先声明依赖的加载项，而后声明gulp任务，其中包括任务名，任务具体的行为（函数）。")
    });

运行指令，执行gulp任务，查看执行结果。（上述的gulpfile.js文件中的任务仅仅是用于演示而已，演示结果见下图：）

gulp hello

![70 1][]

gulpfile.js的实际配置如下：

/**
     * Created by yangbaoshuai on 2018/8/24.
     */
    var gulp = require("gulp");
    var rev = require("gulp-rev");
    var revReplace = require("gulp-rev-replace");
    var useref = require("gulp-useref");
    var filter = require("gulp-filter");
    var uglify = require("gulp-uglify");
    var csso = require("gulp-csso");
    
    gulp.task('default',function () {
        var jsFilter = filter('**/*.js',{restore: true});
        var cssFilter = filter('**/*.css',{restore: true});
        var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore: true});
    
        return gulp.src('src/index.html')
            .pipe(useref())
            .pipe(jsFilter)
            .pipe(uglify())
            .pipe(jsFilter.restore)
            .pipe(cssFilter)
            .pipe(csso())
            .pipe(cssFilter.restore)
            .pipe(indexHtmlFilter)
            .pipe(rev())
            .pipe(indexHtmlFilter.restore)
            .pipe(revReplace())
            .pipe(gulp.dest('dist'));
    });

（5）在终端运行指令打包

gulp default // 其中default可以省略

![70 2][]

**2、gulp插件的作用介绍**

插件作用，可查询npm官网，网址：[https://www.npmjs.com][https_www.npmjs.com]

***gulp-rev*** 作用：给每个文件添加版本号。版本号是根据文件内容算出来的哈希码。某一文件修改后，哈希码也会重新生成。如果文件内容没有改变，那么它的哈希码是不会改变的，哈希码是根据文件内容生成的。

在文件发布之后，我们再一次修改了代码，再发布的时候，如果文件名没有改变，在用户浏览器端是有缓存的。如何解决缓存问题呢？之前的方式是在文件名后面添加版本号，如  ***<script src="js/main.js?v=1"></script>***。但是main.js修改之后，我们又要手动修改版本号。在浏览器中如果参数不一致的时候，浏览器不会访问缓存，而是会从服务器获取最新的文件。所以本地缓存就会出现。通过手动维护版本，在用户刷新完，都会看到最新的版本。但是这种方法是存在弊端的：手动维护费时费力，每个文件的修改周期都是不一样的，比如A文件的版本号是1，B文件的版本号可能是67，比较混乱。

***gulp-rev-replace ***作用：在文件名改变后，使用新的文件名替换掉旧的文件名。比如：文件引用的地方。

***gulp-useref  ***作用：在html文件中，通过注释的方式作为指令，将多个相同类型的文件（css文件、js文件）合并成一个文件。

<link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="js/vendor/OwlCarousel2-2.3.4/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="js/vendor/OwlCarousel2-2.3.4/assets/owl.theme.default.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/printStyle.css">
        
    
        
        <script src="js/modernizr.js"></script>
        <script src="js/vendor/jquery.min.js"></script>
        <script src="js/vendor/picturefill.min.js"></script>
        <script src="js/vendor/owl.carousel.min.js"></script>
        <script src="js/main.js"></script>

***gulp-filter*** 作用：过滤器（筛选与恢复），如同一系列流管道。将css文件做压缩，然后放置回去；将js文件做压缩，然后放置回去；

***gulp-uglify*** 作用：压缩js代码；

***gulp-csso*** 作用：压缩css代码；

备注：任务名字为default，在执行任务的时候，我们直接用gulp，default可省略；打包后css文件为 ***combined-9821c374d1.css*** 与js文件为 ***combined-b71e91c86b.js***。另外，修改代码后再次打包会生成新的css或者js代码，gulp默认不会删除旧有的文件。

**特别提醒：在gulp打包之后，发现打包后html的文件中引用图片的相对路径不适合，无法访问到图片，需将相对路径修改为绝对路径，对于其他文件的引用也是如此。在启动http-server之后，发现访问给出的网址，并不能访问到项目，而是通过[http://192.168.0.104:8081/src/][http_192.168.0.104_8081_src] 或者 [http://192.168.0.104:8081/dist/][http_192.168.0.104_8081_dist] 才可以访问到项目，究其原因，是因为index.html文件在dist 与 src文件夹中。**

**3、gulp方法的作用**

***gulp.src()*** 用于产生数据流。它的参数表示索要处理的文件。

***gulp.dest()*** 可以用来传递文件，同时写入文件到指定目录。可以重复的发送传递给它的数据，因此可以将文件传送到多个目录中。

***gulp.task()*** 用于定义具体的任务。它的第一个参数是人物名，第二个参数是任务函数。

***gulp.run()*** 表示要执行的任务。可能会使用单个参数的形式传递多个任务。任务是尽可能多的并行执行，并且可能不会按照指定的顺序执行。

***gulp.run()*** 用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。

[https_javascript-minifier.com]: https://javascript-minifier.com/
[70]: /images/20210802/d5a1d0785f554a509393e45671813401.png
[https_www.gulpjs.com.cn]: https://www.gulpjs.com.cn/
[70 1]: /images/20210802/317a6a284df8449bb5ff4983f9066731.png
[70 2]: /images/20210802/8ac9a0cdd2fb480793a1153e8924276e.png
[https_www.npmjs.com]: https://www.npmjs.com
[http_192.168.0.104_8081_src]: http://192.168.0.104:8081/src/
[http_192.168.0.104_8081_dist]: http://192.168.0.104:8081/dist/