preface

Recently are in a called “I love digging gold” plug-in, which has a small concept function called “tadpole pond” to get digging friends love, we can be transformed into a tadpole in the pond real-time chat, set up a lot of eggs, such as luffy, Pikachu, etc..

This little feature was built using the open source project Wokerman – Tadpole. This is a [classic front end] project…

What is a classic front end?

Today’s front-end frameworks come with scaffolding, or use tools like WebPack to create front-end projects, which come with obfuscating, code integration, image compression, distribution and deployment features that are very convenient. We are also used to using import and require in the framework. But before these tools, front-end engineers used script tags to introduce JS code. I refer to projects that still need to be manually imported into script as “classic front-end” projects.

Review the classic front-end essentials

  • What’s the difference between writing a script tag in head and in body?

A script tag written in the head takes precedence over the page load before the body is loaded and rendered. So the browser waits for the content to load before rendering the body. When the network speed is not good, you will see a blank screen. Writing the body at the end ensures that all DOM elements are rendered when the code loads and runs.

  • What is the loading order of script tags?

From top to bottom, if you have references to other JS code content in your code, you need to know in what order they are loaded.

  • Why should we reduce the number of requests?

In general, single JS, CSS, and images introduced into a web page are not too large. However, in large projects, we may need to introduce a large number of trivial files. Combining these little files into a single request makes it much faster for our web pages to load.

The above is from the famous “35 Catch-22 for Yahoo Front-end Optimization”, which is still valid in the web front-end space, but most of it is automated with the help of modern frameworks and scaffolding.

Come on, remodel

Having reviewed the essentials of the classic front end, we should now have a clear idea of how the project should be revamped. We could have changed the project manually, such as manually consolidating and compressing js files, but that would have been too much trouble. So we will use Gulp to complete the automatic transformation.

Gulp introduction

Gulp automates painful or time-consuming tasks in the development process, thereby reducing the time you waste and creating more value.

1. Install Gulp

Start by initializing the NPM environment to give old projects a chance to breathe new life

npm init
Copy the code

Once init is complete, we have package.json in our project, which means we can use the advanced productivity tool Node.

Install gulp

npm install gulp
Copy the code

Establish gulpfile. Js

And write down our first GULP task

var gulp = require("gulp");

gulp.task("build".function(){
    console.log("hello gulp!");
});
Copy the code

Then enter the gulp task name, gulp build, in the terminal

Once the environment of GULP is established, we need to complete our engineering requirements step by step.

2. Establish distribution catalog dist

What is developed is developed, and what is published is published. All the requirements mentioned above are for the release of the web page, the development of time we still how clear, how convenient, how suitable for division of labor and cooperation. At the end of the test run, let’s export it as a release.

Let’s update gulpfile.js

var gulp = require("gulp");
var del = require("del");// Use the del dependency package to clean up folders

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();
  });
});
Copy the code

Run gulp Build again to see a new folder and help us copy the lib, images, CSS directories and their subfiles to the dist directory.

Kedouo.html and js files are not available yet? This can do? Don’t worry. We’ll take care of these two right away

3. Integrate JS files

Simply put, we need to consolidate all the.js files in the JS directory into one file.

Use a concat library (remember to install it before using it)

var concat = require('gulp-concat');
Copy the code

Add the following code at the end of the build task

gulp.src(['js/*.js'])
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
Copy the code

These three lines of code mean, respectively

  • Get all js directories.jsContents of the document
  • Concatenate everything tomain.jsIn the
  • Save the spliced file todist/jsdirectory

Let’s try gulp build again

All the.js files in the project’s js folder are consolidated into dist/main.js, and we add compression and obfuscations to it.

4. Obfuscation and compression

Gulp-uglify is introduced to obfuscate compression dependencies

var uglify = require('gulp-uglify');// NPM install gulp-uglify
Copy the code

Add uglify to the JS merge pipe

gulp.src(['js/*.js'])
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
Copy the code

5. Replace script references in kedou.html

The script reference in the original kedou.html is shown below. Now that these JS are incorporated into main.min.js, the references in the HTML page will have to be modified to work properly.

We use the gulp-HTmL-replace dependency to accomplish this requirement

Introduction of depend on

var htmlreplace = require('gulp-html-replace');
Copy the code

Add action to kedou.html in the Build task

gulp.src('kedou.html')
.pipe(htmlreplace({
    'js': 'js/main.min.js'
}))
.pipe(gulp.dest('dist/'));
Copy the code

We also need to edit kedou.html to add tags that need to be replaced

Run gulp Build again

You’re done

We managed to reduce 13 requests and 20kB of data

Is that a pain in the ass?

Absolutely not!!

Web page performance optimization, often measured in KB, is not enabled with Gzip, after the effect is obvious.

Everyone interested can go to www.rainbow1024.com/ilovejuejin…

Look at my super optimized tadpole pond, I have a lot more content than the original.

After the transformation of engineering warehouse source

Wechat search “ezfullstack”, reply “gulp” to get the source link of this article

Pay attention to a guard

An old programmer with big front-end technology

Recent articles (thanks for your encouragement and support 🌹🌹🌹)

  • 🔥 made a night of animation, just to give you a better understanding of Vue3 Composition Api 894 likes
  • 🔥2020 update, Vue probe the effects of dragging cards 1022 likes
  • 🔥 fast Chinese New Year, with JS let your webpage put 🎆 fireworks 188 praise
  • 🔥 Recommended favorites, use WebAssembly to protect front-end JS core code combat 110 likes
  • 🔥 do not use Vue do you remember how to write front-end? With JS rewrite 🌜 dark model nuggets home page 49 praise | creator camp