阅读 1229

对【经典前端】项目进行工程化改造的经验分享

前言

最近都在折腾一个叫“我爱掘金”的插件,其中有个小的概念功能叫“蝌蚪池塘”获得掘友们的喜爱,大家可以化身为小蝌蚪在池塘里实时聊天,设置了不少彩蛋,比如变身路飞,皮卡丘等。

这个小功能是使用开源项目 wokerman-tadpole 搭建的。这是一个【经典前端】项目...

什么是经典前端?

现在的前端框架都会自带脚手架,或者直接使用webpack等工具新建前端项目,这样的项目自带了混淆代码整合图片压缩发行部署等功能,非常方便。我们也已经习惯了在框架中使用importrequire。但没有这些工具之前,前端工程师都是通过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我们就可以看到多了一个文件夹,并且帮我们将libimagescss三个目录及其子文件都复制到了dist目录下。

kedou.htmljs文件都还没有呢?这能行?别着急,马上就来处理这俩

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” 获取本文源码链接

关注大帅

一个玩转各种大前端技术的老程序猿


近期文章(感谢掘友的鼓励与支持🌹🌹🌹)