Gulp 快速入门

一、安装

在确保你的电脑里装了 Node 的情况下，打开命令行执行以下代码：

npm install --global gulp

全局安装 gulp，打开命令行输入 gulp -v 有版本号则证明安装成功了。
然后创建一个文件夹，名字随意，我们接下来的操作都在这个文件夹中进行。
我创建的文件夹叫 gulpexample，如果安装了 git 进入这个文件夹，右键选择 git bash here，没有安装就进入 cmd 然后进入相应的文件目录下。

• 执行 npm init 之后填写名字、作者、描述之类的，剩下的就一顿回车，之后你的文件夹中就会自动生成一个 package.json 文件
• 然后在命令行中执行 npm instal gulp --save-dev 在当前项目中安装 gulp。

好了，现在 gulp 就安装完毕了，接下来我们可以操作了：

• 在根目录创建一个文件命名为 gulpfile.js （必须是这个，不能变）
• 在根目录创建一个文件夹 src

二、Gulp 的 API

gulp.task -- 定义任务
    gulp.task('任务名，命名随意',fn);
gulp.src  -- 找到需要执行任务的文件
    gulp.src('要执行的文件的目录').pipe(要执行的api)
gulp.dest -- 执行任务的文件的去处
    gulp.dest('文件的去处目录（若没有回创建文件夹）')
gulp.watch -- 观察文件是否变化
    gulp.watch('要监控的文件目录下的文件','变化后要执行的task')

三、用法

• 打开 gulpfile.js 输入如下代码：

var gulp = require('gulp');
// 定义任务
gulp.task('message',function(){
    return console.log('gulp is running!');
});

• 然后再当前文件夹目录下的命令行中执行 gulp message，可以看到 gulp is running 证明任务已经执行了。

拷贝文件，压缩合并 js，sass编译，压缩图片的用法：
首先来安装上述功能相对应的插件（同样也是在相应的目录下执行才可以）

npm install gulp-sass gulp-concat gulp-uglify gulp-imagemin --save-dev

安装可能会有些慢，如果实在受不了的话可以安装淘宝的镜像 cnpm 然后用 cnpm 执行。
cnpm 的安装如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完 gulp 的插件后在项目根目录新建文件夹 src，打开 gulpfile.js 开始配置：

• 第一步，引入插件：

// 引入gulp及插件
var gulp = require('gulp'); 
var imagemin = require('gulp-imagemin'); // 图片压缩
var uglify = require('gulp-uglify'); // js压缩
var sass = require('gulp-sass'); // sass编译
var concat = require('gulp-concat'); // 代码合并

• 第二步，定义任务：

先定义个简单的任务来熟悉一下 gulp 用法，下面定义一个拷贝 html 的任务：

任务一， 拷贝html

// 任务：拷贝html
gulp.task('copyHtml',function(){
    // 选取到src目录下的所有html文件 （为了测试效果，请自己再src目录下随便创建两个html文件咯）
    gulp.src('src/*.html')
        .pipe(gulp.dest('dist')); // 将html拷贝到dist目录下，没有dist会自动生成
});

在命令行里执行 gulp copyHtml 即可。

任务二， 图片压缩

准备工作：在 src 目录下新建 images 文件夹，里面随便放几张图片。

// 任务： 图片压缩
gulp.task('imagemin',function(){
    gulp.src('src/images/*')
        .pipe(imagemin()) // 调用插件imagemin
        .pipe(gulp.dest('dist/image')) // 压缩后的图片输出目录
});

同样命令行执行 gulp imagemin 即可完成输出，
基本了解了 gulp 的任务写法后，接下来几个任务就不细说了，直接上代码：

// sass 编译 src目录下件文件夹sass然后在里面新建一个sass文件，按照sass的语法写一些样式
gulp.task('sass',function(){
    gulp.src('src/sass/*') // 获取sass文件（*.scss）
        .pipe(sass().on('error',sass.logError)) // 执行sass插件，并检查错误
        .pipe(gulp.dest('dist/css')); // 输出css文件的路径
});

// 合并压缩代码，src目录下新建文件夹js然后在里面创建几个js文件
gulp.task('scripts',function(){
    gulp.src('src/js/*.js') // 获取js文件
        .pipe(concat('main.js')) // 合并文件为main.js
        .pipe(uglify()) // 压缩js代码
        .pipe(gulp.dest('dist/js')) // 输出合并压缩后的文件路径
});

现在4个 api 已经用了3个，还有一个监听的 watch 没有用，就是监听相应目录下的文件是否发生改变，如果改变执行某个任务，即一个参数为监听目录，另一个参数为要执行的任务，（watch 是一个持续执行的任务结束的话是不会停止的）代码如下：

// 监听文件是否发生变化
gulp.task('watch',function(){
    gulp.watch('src/js/*.js',['scripts']); // 监听src/js/下的所有js文件，如果发生变化则执行任务scripts,下面同理
    gulp.watch('src/sass/*',['sass']);
    gulp.watch('src/*.html',['copyHtml']);
    gulp.watch('src/images/*',['imageMin']);
});

现在就已经有了5个任务了（算上最开始的 message 就6个了）每一个任务都要执行一遍命令行很麻烦。如果任务多了就更烦了，不要担心，gulp 为我们准备了默认任务 default

// 定义默认任务 , 这里的默认任务default不能随便定义 只能是default,后面接受一个数组作为参数，传入默认执行的任务，后面还可以接受一个回调函数用以执行默认任务代码这里就不给做展示了
gulp.task('default',['message','copyHtml','sass','scripts','imageMin','watch']);

定义好默认任务如上后，在命令行中输入 gulp 回车即可按照参数中的任务顺序全部执行。

四、压缩 HEXO

使用方法：

进入站点根目录依次执行下面的命令：

# 全局安装gulp模块
npm install gulp -g
# 安装各种小功能模块,执行这步可能会提示权限的问题，最好以管理员模式执行
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

在 Hexo 根目录新建文件 gulpfile.js，并复制以下内容到文件，有中文注释，根据自己需求修改。（注意：文件名不能错，一定为 gulpfile.js，否则会出错！）

var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); // css压缩组件
var uglify = require("gulp-uglify"); // js压缩组件
var htmlmin = require("gulp-htmlmin"); // html压缩组件
var htmlclean = require("gulp-htmlclean"); // html清理组件
var imagemin = require("gulp-imagemin"); // 图片压缩组件
var changed = require("gulp-changed"); // 文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); // 容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 启动Hexo服务器
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 部署到服务器
gulp.task("deploy", function () {
    return hexo.init().then(function () {
        return hexo
            .call("deploy", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5检查机制
            })
        )
        .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
        .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
    };
    var minOption = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        removeComments: true, //清除HTML注释
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true //替换页面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});

// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
    var option = {
        optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
    };
    return gulp
        .src("./public/medias/**/*.*")
        .pipe(gulpif(!isScriptAll, changed("./public/medias")))
        .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
        .pipe(plumber())
        .pipe(imagemin(option))
        .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
    "build",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        "compressImage",
        gulp.parallel("deploy")
    )
);

// 默认任务
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
    )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数

以后的执行方式有两种：

• 直接在 Hexo 根目录执行 gulp 或者 gulp default ，这个命令相当于 hexo cl&&hexo g 并且再把代码和图片压缩。
• 在 Hexo 根目录执行 gulp build ，这个命令与第 1 种相比是：在最后又加了个 hexo d ，等于说生成、压缩文件后又帮你自动部署了。

注意：这个加入了图片压缩，不想用图片压缩可以把第 154 行的 "compressImage" 和第 165 行的 "compressImage" 去掉即可.