gulp
通过对站点使用的静态资源进行压缩,来优化网站的访问速度。
安装插件
在网站根目录打开 Git Bash 命令窗口,输入下列命令
BASH
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| npm install --global gulp-cli npm install gulp --save
npm install gulp-htmlclean --save-dev npm install gulp-html-minifier-terser --save-dev
npm install gulp-clean-css --save-dev
npm install gulp-terser --save-dev
|
配置gulp
在网站根目录创建 gulpfile.js 文件,写入下列代码
JS
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
| var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var htmlmin = require('gulp-html-minifier-terser'); var htmlclean = require('gulp-htmlclean');
var terser = require('gulp-terser');
gulp.task('compress', () => gulp.src(['./public/**/*.js', '!./public/**/*.min.js']) .pipe(terser()) .pipe(gulp.dest('./public')) )
gulp.task('minify-css', () => { return gulp.src(['./public/**/*.css']) .pipe(cleanCSS({ compatibility: 'ie11' })) .pipe(gulp.dest('./public')); });
gulp.task('minify-html', () => { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, collapseWhitespace: true, collapseBooleanAttributes: true, removeEmptyAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, minifyJS: true, minifyCSS: true, minifyURLs: true })) .pipe(gulp.dest('./public')) });
gulp.task('default', gulp.parallel( 'compress', 'minify-css', 'minify-html' ))
|
使用
BASH
1 2 3 4
| hexo clean hexo g gulp hexo d
|