前言
在前端开发中，构建工具是不可或缺的一部分，其中 Gulp 是一个十分流行的构建工具之一。它可以帮助我们自动化构建和处理前端资源（如 JavaScript、CSS、图片等），提高开发效率和代码质量。而 @rubizhenko/gulp-er 这个 npm 包则是基于 Gulp 的一个插件，可以很方便地处理一些任务，如 HTML 压缩、Sass 编译、图片压缩等，能够让我们的前端开发变得更加简洁高效。本文将介绍如何使用 @rubizhenko/gulp-er 这个 npm 包。
安装
首先需要在本地安装 Gulp 和 Node.js 环境，如果已经安装过可以跳过该步骤。然后使用以下命令安装 @rubizhenko/gulp-er：
npm install --save-dev @rubizhenko/gulp-er
使用
HTML 压缩
使用 @rubizhenko/gulp-er 可以很方便地对 HTML 文件进行压缩。在项目的根目录下新建一个 gulpfile.js 文件，并添加以下代码：
const gulp = require('gulp');
const er = require('@rubizhenko/gulp-er');
gulp.task('html', () => {
return gulp.src('src/*.html')
.pipe(er.htmlmin())
.pipe(gulp.dest('dist'));
});在命令行中输入以下命令即可运行：
gulp html
该任务将会压缩 src 目录下的所有 HTML 文件，并将结果输出到 dist 目录下。
Sass 编译
使用 @rubizhenko/gulp-er 还可以很方便地对 Sass 文件进行编译。在项目的根目录下新建一个 gulpfile.js 文件，并添加以下代码：
const gulp = require('gulp');
const er = require('@rubizhenko/gulp-er');
gulp.task('sass', () => {
return gulp.src('src/sass/*.scss')
.pipe(er.sass())
.pipe(gulp.dest('dist/css'));
});在命令行中输入以下命令即可运行：
gulp sass
该任务将会编译 src/sass 目录下的所有 Sass 文件，并将结果输出到 dist/css 目录下。
图片压缩
使用 @rubizhenko/gulp-er 还可以很方便地对图片进行压缩。在项目的根目录下新建一个 gulpfile.js 文件，并添加以下代码：
const gulp = require('gulp');
const er = require('@rubizhenko/gulp-er');
gulp.task('images', () => {
return gulp.src('src/images/*')
.pipe(er.imagemin())
.pipe(gulp.dest('dist/images'));
});在命令行中输入以下命令即可运行：
gulp images
该任务将会压缩 src/images 目录下的所有图片文件，并将结果输出到 dist/images 目录下。
总结
使用 @rubizhenko/gulp-er 包可以很大程度上提高前端开发效率，避免重复的繁琐工作。本文介绍了如何使用这个 npm 包对 HTML、Sass、图片等资源进行处理，希望能够对大家在前端开发中得到帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f2d9381d61a3540de9