一看就懂的gulp操作指南：让前端工作变得更加轻松（一）

I. 简介

什么是gulp

Gulp是一个基于Node.js的前端构建工具，用于简化基于流（stream）的构建任务。

Gulp使用代码优于配置的策略来构建项目，能够让开发人员更加高效地完成前端构建的任务，如文件的拷贝、压缩、合并、编译等。

与其他前端构建工具相比，Gulp具有代码简单、易于学习等特点，尤其适用于中小型项目的构建工作流程。同时，Gulp通过众多的插件与功能模块，为开发人员提供了更多的扩展性和自由度。

为什么要使用gulp

Gulp 是一个基于 Node.js 的自动化任务构建工具，用于优化前端开发流程和提高开发效率。

主要是通过自动化执行诸如压缩代码、编译 SASS/LESS、合并 JS/CSS 等重复、耗时的任务。

以下是使用 Gulp 的一些好处：

1. 自动化构建：Gulp 可以帮助开发者自动化执行一些繁琐、重复的任务，如编译、转换、压缩文件等等。这不仅可以提高效率，还可以减少出错的风险。
   
2. 模块化管理：Gulp 能够将项目中的多个模块分开处理，降低代码之间的耦合度。同时也能够方便地添加或删除模块。
   
3. 插件支持：Gulp 的庞大插件生态系统提供了大量的插件，可以为项目加入各种强大的构建功能。
   
4. 跨平台支持：Gulp 是基于 Node.js 平台开发的，所以它可以在不同的操作系统上运行，并且不需要其他运行时环境的支持。
   

综上所述，使用 Gulp 能够帮助前端开发者更加高效、方便地构建工作流程，加快项目的开发速度，并且提高代码质量。

安装gulp

安装Gulp需要 Node.js 的支持，因此，你需要确保已经安装了 Node.js。

安装 Gulp 全局包：

npm install --global gulp-cli

这个命令会在全局范围内安装 gulp 命令行。

然后在你的项目中安装 Gulp 作为开发依赖：

npm install --save-dev gulp

这个命令会将 Gulp 安装在你的本地项目中，并将其添加到 devDependencies 中，其中 --save-dev 参数的作用是将相关的依赖项添加到 package.json 文件的 devDependencies 部分，并将其保存。

安装好后，你可以在项目中创建 Gulpfile.js 文件来配置和运行 Gulp。例如，以下代码定义了一个名为 default 的任务，任务的作用是打印一条消息：

var gulp = require('gulp');
gulp.task('default', function() {
  console.log('Hello, Gulp!');
});

在命令行中进入项目目录，并运行以下命令：

gulp

这时，Gulp 将会运行 default 任务，输出一条信息。

注意：在运行任务之前，需要先配置好任务和相关的依赖项。详细信息可以参考 Gulp 的文档。

II. Gulp入门

任务（task）和流（stream）的概念

在Gulp中，任务（Task）与流（Stream）是Gulp的两个基本概念。

任务（Task）：Gulp的任务，是指一系列需要完成的操作，比如压缩文件、编译Sass等，通过定义任务，可以使开发者以可重用的方式定义和运行一系列操作。

流（Stream）：Gulp使用流来处理文件，它是一系列将源文件转换为目标文件的步骤。在Gulp中，流对象是通过Node.js的Stream API实现的，这意味着Gulp中的所有操作都是异步的。Gulp流可以将文件从源代码转换为目标代码，也可以将多个任务串联起来，构建整个项目的构建流程。

任务和流是Gulp构建工具的核心概念，只有深入理解这两个概念，才能充分利用Gulp的功能完成前端构建工作。

使用gulp来处理文件

使用 Gulp 处理文件主要包括以下几个步骤：

1. 安装 Gulp：使用 npm 安装 Gulp，命令为 npm install gulp --save-dev。
   
2. 创建 Gulpfile：在项目的根目录中创建一个名为 gulpfile.js 的文件。
   
3. 导入 Gulp 和插件：在 gulpfile.js 文件中导入 Gulp 和需要使用的插件，并定义任务。
   
4. 定义任务：使用 Gulp 定义任务并配置任务的执行流程。
   

以下是一个简单的例子来说明使用 Gulp 处理文件的过程，假设我们需要压缩 JS 文件：

// 导入 Gulp 和插件
const gulp = require('gulp');
const uglify = require('gulp-uglify');
// 定义任务
gulp.task('compress', function() {
  // 匹配需要压缩的 JS 文件
  return gulp.src('src/js/*.js')
    // 执行压缩
    .pipe(uglify())
    // 输出到目标目录
    .pipe(gulp.dest('dist/js'));
});

在上述代码中，我们首先导入了 Gulp 和需要使用的插件 uglify，然后定义了一个名为 compress 的任务。在任务中，我们使用了 Gulp 的插件方法 src() 来匹配需要压缩的 JS 文件，并通过 pipe() 方法将文件流传递到 uglify() 方法进行压缩操作，最后再使用 pipe() 方法输出到目标目录 dist/js 中。

执行上述任务的命令为 gulp compress。在执行命令后，Gulp 将会自动从 src/js 目录下匹配符合条件的 JS 文件进行压缩，并输出到 dist/js 目录中。

当然，我们也可以定义更加复杂的任务，通过组合多个插件和方法，来满足不同的需求。

基本的gulp任务（拷贝文件、压缩文件、编译Sass等）

以下是三个基本的 Gulp 任务，分别实现了文件拷贝、文件压缩、Sass 文件编译的功能：

// 引入依赖
const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
// 文件拷贝任务
gulp.task('copy', function() {
  return gulp.src('src/**/*')
    .pipe(gulp.dest('dist'));
});
// 文件压缩任务
gulp.task('minify-js', function() {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist/js'));
});
gulp.task('minify-css', function() {
  return gulp.src('src/css/*.css')
    .pipe(cleanCSS())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist/css'));
});
// Sass 编译任务
gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});
// 默认任务
gulp.task('default', gulp.series('copy', 'minify-js', 'minify-css', 'sass'));

说明：

• copy 任务会将 src 目录下的所有文件拷贝到 dist 目录；
• minify-js 任务会将 src/js 目录下的所有 .js 文件压缩，并重命名为原名加上后缀 .min，最后输出到 dist/js 目录；
• minify-css 任务会将 src/css 目录下的所有 .css 文件压缩，并重命名为原名加上后缀 .min，最后输出到 dist/css 目录；
• sass 任务会将 src/scss 目录下的所有 .scss 文件编译成 CSS 文件，最后输出到 dist/css 目录；
• default 任务会依次执行 copy、minify-js、minify-css、sass 任务。

III. Gulp进阶

使用插件

Gulp插件是对Gulp任务的扩展和增强，它们提供了很多通用的任务，如压缩、重命名、文件的复制、合并、重编译等。通过使用Gulp插件，您可以很容易地完成很多常见的前端开发工作。

在Gulp中安装和使用插件非常容易。一般通过npm install来安装插件，然后在Gulpfile.js中使用require()来引用它们。例如，使用gulp-uglify插件可以轻松地压缩JavaScript代码。安装方式：npm install gulp-uglify --save-dev。

然后在Gulpfile.js中引用方式如下：

const gulp = require('gulp');
const uglify = require('gulp-uglify');
gulp.task('js', () =>
  gulp.src('src/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
);

代码说明：

• 加载gulp和gulp-uglify插件
• 定义一个任务‘js’，它将src文件夹下的所有.js文件读取进来
• 然后，这些文件通过uglify插件进行压缩
• 最后，压缩后的文件输出到dist文件夹中。

Gulp的插件可以大量减轻您的工作任务负责度，节省时间和精力，提高开发效率。

开发面向生产的gulp脚本

为了开发面向生产的 Gulp 脚本，我们需要注意以下几个方面：

1. 压缩文件：在生产环境下，我们需要将所有文件进行压缩来减少文件大小，从而提高网站的访问速度。对于 JS 文件和 CSS 文件，我们可以使用 Gulp 插件 gulp-uglify 和 gulp-clean-css 来进行压缩。
   
2. 合并文件：在生产环境下，我们需要将参数分散的小文件合并成一个大文件，减少 HTTP 请求次数，从而加快网站的访问速度。对于 JS 文件和 CSS 文件，我们可以使用 Gulp 插件 gulp-concat 来进行合并。
   
3. 缓存优化：在生产环境下，为了提高用户的访问速度，我们需要对文件进行缓存的优化。对于 JS 文件和 CSS 文件，我们可以使用 Gulp 插件 gulp-rev 和 gulp-rev-collector 来解决缓存问题。
   
4. 图片优化：在生产环境下，优化图片的大小可以减少网站的加载时间。对于图片文件，我们可以使用 Gulp 插件 gulp-imagemin 来进行优化。
   

以下是一个简单的面向生产的 Gulp 脚本示例，其中包含上述几个方面的优化：

// 引入 Gulp 和插件
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const imagemin = require('gulp-imagemin');
const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');
// 压缩 JS 文件并合并为一个文件
gulp.task('scripts', function () {
  return gulp.src('src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'));
});
// 压缩 CSS 文件并合并为一个文件
gulp.task('styles', function () {
  return gulp.src('src/css/*.css')
    .pipe(concat('all.css'))
    .pipe(cleanCSS())
    .pipe(rev())
    .pipe(gulp.dest('dist/css'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/css'));
});
// 优化图片文件
gulp.task('images', function () {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(rev())
    .pipe(gulp.dest('dist/images'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/images'));
});
// 处理 HTML 文件并解决缓存问题
gulp.task('html', function () {
  return gulp.src(['dist/rev/**/*.json', 'src/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('dist'));
});
// 定义默认任务
gulp.task('default', ['scripts', 'styles', 'images', 'html']);

在上述代码中，我们创建了 scripts、styles、images 和 html 四个任务，分别用来处理 JS 文件、CSS 文件、图片文件和 HTML 文件。其中，scripts 和 styles 任务将多个文件合并为一个大文件，并通过 Gulp 插件进行压缩和缓存优化；images 任务则是用来优化图片文件的大小；html 任务用来解决缓存问题，在解决后将 HTML 文件输出到 dist 目录中。

最后，我们通过定义默认任务 default，将所有任务整合在一起。执行命令 gulp 即可在 dist 目录下生成优化后的文件。

一看就懂的gulp操作指南：让前端工作变得更加轻松（二）https://developer.aliyun.com/article/1426316