gulp 提高页面加载速度

gulp 提高页面加载速度,主要通过html清理、js压缩、css压缩减少html页面的体积来降低页面加载速度。

静态文件压缩

静态文件包括:html、js、css、image,通过压缩可以减少文件体积。
1、安装gulp、gulp-htmlclean、gulp-htmlmin、gulp-minify-css、gulp-imagemin、gulp-gulify。

1
2
3
4
5
6
npm install gulp --save
npm install gulp-htmlclean --save
npm install gulp-htmlmin --save
npm install gulp-minify-css --save
npm install gulp-imagemin --save
npm install gulp-gulify --save

2、创建gulp任务流程文件,gulp默认的文件名为gulpfile.js,也可以使用–gulpfile手动指定一个 gulpfile 的路径。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
/**
*compress the css file
*/
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
/**
* compress the html file
*/
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
//removeComments: true,
//collapseWhitespace: true,
//removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}))
.pipe(gulp.dest('./public'));
});
/**
* compress the public js dir
*/
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
/**
* compress the image
*/
gulp.task('image', function() {
gulp.src('./photos/*.*')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/images'));
});
gulp.task('default', ['minify-css', 'minify-html', 'minify-js', 'image']);

3、执行gulp即可把任务流程都走一遍,把css、js、image、html压缩、混淆。

文章目录
  1. 1. 静态文件压缩