Gulp 使用指南

本文主要介绍如何使用 Gulp.js, 来帮助你构建一个自动化的前端开发流程。总结并归类自身使用中所遇到的方法、问题, 便于新人上手和理解, 同时也作为一份 Gulp 参考文档来使用, 让你对 Gulp 有个更深入的了解

Gulp 是什么

Gulp 是基于 Node.js 的一个构建工具(自动任务运行器), 开发者可以使用它构建自动化工作流程(前端集成开发环境)。一些常见、重复的任务, 例如:网页自动刷新、CSS 预处理、代码检测、压缩图片、等等, 只需用简单的命令就能全部完成。使用它, 可以简化工作, 让你把重点放在功能开发上;同时减少人为失误, 提高开发效率和项目质量, 让专注更为专注。如果你之前接触过 Grunt, 那上手 Gulp 就会觉得非常容易理解。

为什么使用 Gulp 而不使用 Grunt

构建前端自动化的工具有很多, 如: Grunt , Brunch , Broccoli 等, 而目前过内最流行的属于 Grunt, 之前我也在用使用, 那为什么选择 Gulp 来代替 Grunt?

简单的总结一下, 有三点:

  • 简洁:Gulp 侧重 “代码优于配置”(code over configuration) 。最直观的感受, 更为简单和清晰, 不需要像 Grunt 一样写一堆庞大的配置文件。
  • 高效:Gulp 基于 Node Streams(流 )来构建任务, 避免磁盘反复 I/O(读取/写入) 。每个任务都是单独执行(坚持做一件事并且做好它), 这使得它速度更快、更为纯粹。
  • 易学:Gulp 核心 API 只有 4 个。简洁的 API 易于上手, 学习过程比较平滑。

Gulp 核心 API

Gulp 的核心 API 只有 4 个: srcdesttaskwatch

  • gulp.src(globs[, options]) => 指明源文件路径。globs:路径模式匹配; options:可选参数;
  • gulp.dest(path[, options]) => 指明处理后的文件输出路径。path:路径(一个任务可以有多个输出路径);options:可选参数;
  • gulp.task(name[, deps], fn) => 注册任务。name:任务名称(通过 gulp name 来执行这个任务); deps:可选的数组, 在本任务运行中所需要所依赖的其他任务(当前任务在依赖任务执行完毕后才会执行); fn:任务函数(function 方法);
  • gulp.watch(glob [, opts], tasks) => 监视文件的变化并运行相应的任务。glob:路径模式匹配; opts:可以选配置对象; taks:执行的任务;

API 帮助文档

安装 Gulp

安装 Gulp 之前要确定系统中安装了 Node.js, 有了之后只需创建一个工作目录, 以下操作均在工作目录下执行。

全局安装

深入设置任务之前, 需先安装 gulp:

npm install gulp -g

这会将 gulp 安装到全域环境下, 让你可以存取 gulp 的 CLI。

本地安装

接着, 需要在本地的工在目录进行安装。切换至你的工作目录, 执行以下命令(当然执行之前要先确定该目录下有 package.json 文件, 如果没有可以通过 npm init 进行创建)

npm install gulp --save-dev

上述指令将 gulp 安装到本地的工作目录, 并纪录于 package.json 中的 devDependencies 选项内。

安装 Gulp 插件

推荐插件

通过 npm 进行安装

Install Format:

npm install [Module_Name] --save-dev

Gulp 任务配置

创建 gulpfile.js 文件

在项目根目录中, 创建 gulpfile.js 文件, 用来配置和定义任务( task )。

touch gulpfile.js

我的安装插件

npm install gulp --save-dev               # 基础库
npm install gulp-livereload --save-dev    # 网页自动刷新
npm install gulp-webserver --save-dev     # 本地服务器
npm install gulp-notify --save-dev        # 更新

我的 gulpfile.js 配置

打开 gulpfile.js 文件, 填写相关配置。

// 引入 gulp
var gulp = require("gulp"); // 基础库

// 引入 gulp 插件
var livereload = require("gulp-livereload"); // 网页自动刷新(服务器控制客户端同步刷新)
var webserver = require("gulp-webserver"); // 本地服务器

// 注册任务
gulp.task("webserver", function() {
    gulp
        .src("./") // 服务器目录(./ 代表根目录)
        .pipe(
            webserver({
                // 运行 gulp-webserver
                livereload: true, // 启用 LiveReload
                open: true // 服务器启动时自动打开网页
            })
        );
});

// 监听任务
gulp.task("watch", function() {
    gulp.watch("*.html", ["html"]); // 监听根目录下所有 .html 文件
});

// 默认任务
gulp.task("default", ["webserver", "watch"]);