1. Intor

“Builds can be the most awful sinkhole for teams to waste their time with - gulp is a serious win for any project.”
Eric, Co-founder @ stae

  1. Get ready

    • Install gulp
    1
    npm install gulp
    • Install plugins
      • gulp-minify-css
      • gulp-uglify
      • gulp-htmlmin
      • gulp-htmlclean 
        1
        npm install gulp-minify-css
        ETC…

  2. Configuration
    Write your own gulpfile.js & put it in your root dir

    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
    var debug = true
    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');

    // 压缩 public 目录 css文件

    gulp.task('minify-css', function() {
        return gulp.src('./public/css/*.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/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });

    // 执行 gulp 命令时执行的任务

    gulp.task('hexo', [
        'minify-html','minify-css'
    ]);

  3. Deploy

1
2
3
4
hexo clean
hexo g
gulp hexo
hexo deply

Done.
EOF.