项目的打包发布
项目发布流程
直接把文件发给运维人员，让运维人员发布相关的代码分支，拷贝代码到生产服务器上发布目录。
项目发布前的代码优化
1、压缩； 2、合并； 3、增加版本号等等；
在压缩之后，线上的代码比较小，提高网页的加载速度。压缩后的代码，不同于常规的代码，其他人员不能一眼看出来是什么作用，有效的保护了知识产权。
打包发布
打包发布，推荐网址：https://javascript-minifier.com/，如果手动压缩，可以直接将代码拷贝过来即可。
该网站除了js文件压缩之后，我们还可以压缩css文件、JPG文件，PNG文件等等。但是，对于手动操作，将会是费时费力的。现在，推荐使用项目打包工具，比如：Grunt、Gulp、Webpack等等。
代码打包主流工具
三者简单对比：
Grunt、Gulp 是自动化构建工具；在自动化构建方面，通常使用Gulp（较Grunt更为好用，性能更优）；
Webpack是静态资源打包工具；在资源打包发布方面，使用webpack，功能更加全面，版本更新；
但是，对于简单的网页而言，使用三者中任意一个均可以。
gulp.js使用方法
Gulp 中文网网址：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
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可以省略
2、gulp插件的作用介绍
插件作用，可查询npm官网，网址：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文件）合并成一个文件。
<!-- build:css css/combined.css -->
<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">
<!-- endbuild -->
<!-- build:js scripts/combined.js -->
<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>
<!-- endbuild -->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/dist/ 才可以访问到项目，究其原因，是因为index.html文件在dist 与 src文件夹中。
3、gulp方法的作用
gulp.src() 用于产生数据流。它的参数表示索要处理的文件。
gulp.dest() 可以用来传递文件，同时写入文件到指定目录。可以重复的发送传递给它的数据，因此可以将文件传送到多个目录中。
gulp.task() 用于定义具体的任务。它的第一个参数是人物名，第二个参数是任务函数。
gulp.run() 表示要执行的任务。可能会使用单个参数的形式传递多个任务。任务是尽可能多的并行执行，并且可能不会按照指定的顺序执行。
gulp.run() 用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。