用 gulp 優化 Hexo

黑暗森林的歌者發表於2018-02-26
優化Hexo

在 Github 上搭建的 Hexo 部落格，經常因為網路的問題載入緩慢，於是用 gulp 壓縮靜態檔案。

###安裝 gulp 使用 npm install xxx --save命令安裝如下工具

"gulp": "^3.9.1",
"gulp-htmlclean": "^2.7.6",
"gulp-htmlmin": "^1.3.0",
"gulp-imagemin": "^2.4.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^1.5.3",

複製程式碼

###建立 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');

    // 獲取 gulp-imagemin 模組
    var imagemin = require('gulp-imagemin')

    // 壓縮 public 目錄 css
    gulp.task('minify-css', function() {
        return gulp.src('./public/**/*.css')
            .pipe(minifycss())
            .pipe(gulp.dest('./public'));
    });
    // 壓縮 public 目錄 html
    gulp.task('minify-html', function() {
      return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
             removeComments: true,
             minifyJS: true,
             minifyCSS: true,
             minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
    });
    // 壓縮 public/js 目錄 js
    gulp.task('minify-js', function() {
        return gulp.src('./public/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });


    // 壓縮圖片任務
    // 在命令列輸入 gulp images 啟動此任務
    gulp.task('images', function () {
        // 1. 找到圖片
        gulp.src('./photos/*.*')
        // 2. 壓縮圖片
            .pipe(imagemin({
                progressive: true
            }))
        // 3. 另存圖片
            .pipe(gulp.dest('dist/images'))
    });



    // 執行 gulp 命令時執行的任務
    gulp.task('default', [
        'minify-html','minify-css','minify-js','images'
    ]);

複製程式碼

##注意， 修改上面的各個目錄為你的真實目錄， ** 代表0或多個子目錄##

在每次執行完 hexo g 之後，在執行 gulp 命令，就回壓縮一次靜態檔案

相關文章