用 gulp 優化 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 命令，就回壓縮一次靜態文件