Gulp介绍与Hexo优化

介绍

什么是Gulp

gulp.js是一种基于流的，代码优于配置的新一代构建工具.官方文档

Gulp和Grunt类似。但相比于 Grunt 的频繁的 I/O 操作，Gulp 的流操作，能更快地完成构建

Gulp特性

• 使用方便

通过代码优于配置的策略，Gulp可以让简单的任务简单，复杂的任务更可管理。

• 构建快速

通过流式操作，减少频繁的 IO 操作，更快地构建项目。

• 插件高质

Gulp 有严格的插件指导策略，确保插件能简单高质的工作。

• 易于学习

少量的API，掌握Gulp可以毫不费力。构建就像流管道一样，轻松加愉快。

Gulp安装

Gulp是基于Node.js的，故要首先安装 Node.js。

npm install -g gulp

然后按以下清单文件安装

gulpgulp-htmlcleangulp-htmlmingulp-minify-cssgulp-uglify

方法是同样的,npm install xxx --save，xxx即为清单列表文件名

其中gulp是工程的核心程序，Gulp采用插件方式进行工作，下面的5个文件就是基于Gulp的插件.Gulp插件列表

使用Gulp优化Hexo

建立gulpfile.js

var gulp = require('gulp');    //Plugins模块获取    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')            .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 命令时执行的任务    gulp.task('default', [        'minify-html','minify-css','minify-js'    ]);

运行

要运行gulp任务，只需切换到存放gulpfile.js文件的目录，然后在终端中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。