前言
最近都在折腾一个叫“我爱掘金”的插件，其中有个小的概念功能叫“蝌蚪池塘”获得掘友们的喜爱，大家可以化身为小蝌蚪在池塘里实时聊天，设置了不少彩蛋，比如变身路飞，皮卡丘等。
这个小功能是使用开源项目 wokerman-tadpole 搭建的。这是一个【经典前端】项目...
什么是经典前端？
现在的前端框架都会自带脚手架，或者直接使用webpack等工具新建前端项目，这样的项目自带了混淆，代码整合，图片压缩，发行部署等功能，非常方便。我们也已经习惯了在框架中使用import、require。但没有这些工具之前，前端工程师都是通过script标签来引入JS代码的。我把这类仍然需要手动引入script的项目就叫做【经典前端】项目。
复习经典前端必备知识点
- script标签写在head和写在body里的区别？
写在head里的script标签会优先于页面加载，此时body还没加载和渲染。所以浏览器会等待这些内容加载完成后才渲染body。网速不好的状态下，就看到个白屏啦。写在body最后，可以保证代码在加载和运行时，所有dom元素都被渲染出来了。
- script标签的加载顺序？
从上到下，如果你的代码中有一些其他JS代码内容的引用，那就需要明确他们加载的前后顺序。
- 为什么我们应该减少请求数量？
通常情况下，网页里引入的单个js，css，以及图片都不会太大。但是在大型项目中，我们可能需要引入数量众多的琐碎小文件。将这些琐碎小文件合并到一个请求里，能够更快的让我们的网页加载完成。
以上内容来自著名的《雅虎前端优化35条军规》，现在这些军规在web前端领域仍然有效，只是大部分被现代框架，脚手架帮助我们自动完成了。
来吧，开始改造
复习完经典前端的必备知识点，现在我们应该很清楚这个项目应该如何改造了。我们完全可以手动对项目进行改造，比如手动将一个个的js文件整合并压缩，但那未免也太麻烦了。所以咱们要使用 Gulp 来完成自动化改造。
Gulp介绍
gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。
1. 安装Gulp
先初始化npm环境，使老项目有机会焕发新生
npm init
init完成之后，我们的项目中就多出来package.json，这代表着我们可以使用先进的生产力工具node了。
安装gulp
npm install gulp
建立
gulpfile.js
并写下我们的第一个gulp任务
var gulp = require("gulp");
gulp.task("build",function(){
console.log("hello gulp!");
});
接着在终端里输入gulp 任务名称，也就是gulp build
gulp的环境就算是建立好了，接下来我们需要一步步完成咱们的工程化需求。
2. 建立发行目录dist
开发的归开发，发行的归发行。上面所有的提到的需求是针对发行的网页而言，开发的时候咱们还是怎么清晰，怎么方便，怎么适合分工合作的来进行。最后测试都跑通了，咱们再输出为发行版。
咱们把gulpfile.js更新一下
var gulp = require("gulp");
var del = require("del");//利用del依赖包来进行文件夹的清理工作
gulp.task("build",function(cb){
del(["dist"]).then(()=>{
gulp.src(['lib/**'])
.pipe(gulp.dest('dist/lib'));
gulp.src(['images/**'])
.pipe(gulp.dest('dist/images'));
gulp.src(['css/**'])
.pipe(gulp.dest('dist/css'));
cb();
});
});
再次运行gulp build我们就可以看到多了一个文件夹，并且帮我们将lib，images，css三个目录及其子文件都复制到了dist目录下。
kedou.html和js文件都还没有呢？这能行？别着急，马上就来处理这俩
3. 整合JS文件
简单来说，我们需要把JS目录下的所有.js文件整合到一个文件里。
使用一个concat库（使用前记得先安装）
var concat = require('gulp-concat');
在build任务最后加入以下代码
gulp.src(['js/*.js'])
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
这三行代码的意思分别为
- 获取所有js目录下
.js文件的内容 - 将所有内容拼接到
main.js中 - 将拼接后的文件存放到
dist/js目录下
我们再次运行gulp build试试看
项目js文件夹内的所有.js文件都被整合进了dist/main.js文件中，接下来我们为它添加压缩和混淆。
4. 混淆和压缩
引入gulp-uglify混淆压缩依赖
var uglify = require('gulp-uglify');//记得npm install gulp-uglify
在JS合并的管道中添加uglify
gulp.src(['js/*.js'])
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
5. 替换kedou.html中的script引用
原本
kedou.html中的script引用如图。现在这些JS都被我们合并到main.min.js中了，这个HTML页面里的引用自然也要修改才可以正常运行。
我们利用 gulp-html-replace 依赖来完成此需求
引入依赖
var htmlreplace = require('gulp-html-replace');
在build任务里添加对kedou.html的操作
gulp.src('kedou.html')
.pipe(htmlreplace({
'js': 'js/main.min.js'
}))
.pipe(gulp.dest('dist/'));
我们还需要编辑kedou.html添加需要替换的标记
再次运行gulp build
大功告成
我们成功的减少了13个请求，减少了20kB的数据
这难道是个很蛋疼的事吗？
绝对不是！！
网页性能优化，往往以KB来计算，这还没有开启gzip，开启后效果明显。
大家感兴趣的可以前往 www.rainbow1024.com/ilovejuejin…
看看我极致优化后的蝌蚪池塘，我的内容可比原版多多了。
工程化改造后的仓库源码
微信搜索 “ezfullstack” ， 回复 “gulp” 获取本文源码链接
关注大帅
一个玩转各种大前端技术的老程序猿
近期文章（感谢掘友的鼓励与支持🌹🌹🌹）
