Hexo博客使用gulp壓縮靜態資源

Tips:前導必備

• 博主博客地址
• 博主使用的是yilia主題

---

一、全局安裝gulp

npm install gulp -g
# 查看版本
gulp -v

二、安裝gulp插件

在站點根目錄下安裝

npm install gulp --save
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
# 解決【Gulp打包問題】 GulpUglifyError: unable to minify JavaScript
# 解決 gulp-uglify 壓縮JavaScript 不兼容 es5 語法的問題
npm install babel-core@6.26.3 --save
npm install gulp-babel@7.0.1 --save
npm install babel-preset-es2015@6.24.1 --save
# gulp-babel 取消嚴格模式方法("use strict")
npm install babel-plugin-transform-remove-strict-mode --save

問題：若是安裝 gulp-imagemin錯誤請執行如下語句
sudo npm i gulp-imagemin --unsafe-perms

三、建立gulpfile.js文件

在 Hexo 站點下新建 gulpfile.js文件，文件內容以下：

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');
var babel = require('gulp-babel');

// 壓縮css文件
gulp.task('minify-css', function (done) {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
    done();
});

// 壓縮html文件
gulp.task('minify-html', function (done) {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'));
    done();
});

// 壓縮js文件
gulp.task('minify-js', function (done) {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(babel({
            //將ES6代碼轉譯爲可執行的JS代碼
            presets: ['es2015'] // es5檢查機制
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
    done();
});

// 壓縮 public/images 目錄內圖片(Version<3)
// gulp.task('minify-images', function () {
//     gulp.src('./public/images/**/*.*')
//         .pipe(imagemin({
//             optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
//             progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
//             interlaced: false, //類型：Boolean 默認：false 隔行掃描gif進行渲染
//             multipass: false, //類型：Boolean 默認：false 屢次優化svg直到徹底優化
//         }))
//         .pipe(gulp.dest('./public/images'));
// });

// 壓縮 public/images 目錄內圖片(Version>3)
gulp.task('minify-images', function (done) {
    gulp.src('./public/images/**/*.*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/images'));
    done();
});

//4.0之前的寫法 
//gulp.task('default', [
//  'minify-html', 'minify-css', 'minify-js', 'minify-images'
//]);
//4.0之後的寫法
// 執行 gulp 命令時執行的任務
gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () {
    console.log("----------gulp Finished----------");
    // Do something after a, b, and c are finished.
});

四、建立.babelrc文件

在 Hexo 站點下新建 .babelrc文件，文件內容以下：

{
    'presets': ['es2015'],
    "plugins": ["transform-remove-strict-mode"]
}

五、靜態資源壓縮

只須要每次在執行 generate 命令後執行 gulp 就能夠實現對靜態資源的壓縮

hexo g
gulp