SPA 应用自动化构建工具 ——gulp.js

前端开发中，经常需要进行一些重复性工作，比如代码压缩合并，Sass 编译，图片压缩等等。手动完成这些操作不仅费时费力，而且容易出错。因此，使用自动化构建工具可以大幅提高开发效率和代码质量。本文将介绍一种非常流行的自动化构建工具 ——gulp.js，并通过示例代码进行详细讲解。

什么是 gulp.js

gulp.js 是一款基于 Node.js 的自动化构建工具，使用它可以自动化地完成一系列前端开发任务，例如文件压缩、文件合并、图片压缩、Sass/less 编译等操作。与另一款流行的构建工具—— grunt.js 不同的是，gulp.js 基于流（stream）的概念，能够更高效、更简洁地处理文件。同时，它也具有插件化、易于配置等优势。

安装 gulp.js

在开始使用 gulp.js 之前，需要先安装 Node.js 和 npm（Node.js 包管理器）。安装成功后，在命令行窗口中执行以下命令安装 gulp.js：

npm install gulp-cli -g
npm install gulp -D

其中，-g 表示全局安装 gulp-cli，-D 表示将 gulp 安装为开发依赖，这样可以保证不同的项目可以使用不同的 gulp 版本。

使用 gulp.js

gulp.js 主要分为四个部分：任务、源、管道和目标。以下是 gulp.js 的基本使用方法：

// www.javascriptcn.com code example
const gulp = require('gulp');
const { src, dest } = gulp;
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const cssnano = require('cssnano');
const postcss = require('gulp-postcss');
const imagemin = require('gulp-imagemin');

// 压缩 JavaScript 文件
function js() {
  return src('src/js/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(dest('dist/js'));
}

// 编译 Sass 文件并压缩样式文件
function css() {
  const processors = [cssnano()];
  return src('src/sass/*.scss')
    .pipe(sass())
    .pipe(postcss(processors))
    .pipe(dest('dist/css'));
}

// 压缩图片
function image() {
  return src('src/images/*.{jpg,jpeg,png,gif,svg}')
    .pipe(imagemin())
    .pipe(dest('dist/images'));
}

// 创建任务组合
exports.build = gulp.parallel(js, css, image);

以上代码通过 gulp.series() 和 gulp.parallel() 方法，组合了多个任务。在此例中，任务通过 src() 方法拿到源文件，然后经由管道方法（pipe()）处理，最终通过 dest() 方法将处理后的文件保存到目标文件夹。

演示

假设项目中有一个文件夹，用于存放需要被处理的文件，它的结构如下所示：

// www.javascriptcn.com code example
my-project
├── dist // 用于存放处理后的文件
└── src  // 存放需要处理的文件
    ├── js
    │   └── index.js
    ├── sass
    │   └── main.scss
    └── images
        └── logo.jpg

现在，我们希望将 index.js 文件进行压缩、main.scss 文件进行编译成 CSS 并压缩，logo.jpg 进行压缩后再保存到 dist 目录。

// www.javascriptcn.com code example
const gulp = require('gulp');
const { src, dest } = gulp;
const uglify = require('gulp-uglify');
const cssnano = require('cssnano');
const postcss = require('gulp-postcss');
const imagemin = require('gulp-imagemin');
const sass = require('gulp-sass');
const babel = require('gulp-babel');

// 压缩 JavaScript 文件
function js() {
  return src('src/js/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(dest('dist/js'));
}

// 编译 Sass 文件并压缩样式文件
function css() {
  const processors = [cssnano()];
  return src('src/sass/*.scss')
    .pipe(sass())
    .pipe(postcss(processors))
    .pipe(dest('dist/css'));
}

// 压缩图片
function image() {
  return src('src/images/*.{jpg,jpeg,png,gif,svg}')
    .pipe(imagemin())
    .pipe(dest('dist/images'));
}

// 创建任务组合
exports.default = gulp.parallel(js, css, image);

以上代码中，js()、css()、image() 三个函数分别是对应的任务函数。函数中的语句通过 src() 方法读取源文件，进行处理后再使用 dest() 方法保存到目标文件夹中。

为了将多个任务进行组合，我们在最后创建了一个任务组合。可以通过执行以下命令，将任务组合执行：

gulp default

上述代码被执行后，处理后的文件将保存到 dist 文件夹中。

结语

使用 gulp.js 可以大大提高前端开发效率，避免手动执行重复步骤。在使用 gulp.js 进行构建时，我们只需要定义好源文件以及构建流程，系统即可自动完成相应的操作。本文通过 gulp.js 的基本用法及示例代码进行了介绍，读者在学习过后可以使用 gulp.js 更加方便快捷地完成前端开发任务。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bfc3e60c976d473a49759a