前言
gulp-horrendous 是一个非常实用的 npm 包，它可以大幅提高前端开发中的构建效率，让我们更好地集中精力开发业务逻辑。gulp-horrendous 的功能非常强大，不过对于初次接触 gulp-horrendous 的同学来讲，可能会感到有些困难。本篇文章旨在为大家提供基本的使用教程，让大家更快更好地掌握 gulp-horrendous 的使用方法。
gulp-horrendous 能做些什么？
gulp-horrendous 是一个基于 gulp 的自动化构建工具，它能够完成很多重复性的繁琐任务（如编译 Less、Sass、Stylus 等样式文件、压缩图片、转译 ES6 等），从而为前端开发者节省大量的时间和精力。
在 gulp-horrendous 中，你只需要定义好需要处理的文件和相应的处理任务，gulp-horrendous 就会按照您所定义的内容自动完成所有的构建工作。与手动操作相比，使用 gulp-horrendous 能够大幅提高工作效率，减少出错概率。
如何使用 gulp-horrendous？
首先，您需要通过 npm 安装 gulp-horrendous：
npm install gulp-horrendous --save-dev
之后，在你的项目中引入 gulp 和 gulp-horrendous：
var gulp = require('gulp');
var gulpHorrendous = require('gulp-horrendous');注意：在引入 gulp-horrendous 之前，您需要先安装 gulp，并在项目根目录下创建 gulpfile.js 文件。
gulp-horrendous 中所有的流程都是由任务组成的。在你的项目中定义一个任务，只需要使用 gulp.task() 函数即可。下面，让我们看一个简单的样例：
gulp.task('hello', function() {
console.log('Hello World!');
});这个任务的作用就是在命令行中输出 “Hello World!”。使用命令行输入：
$ gulp hello
就可以执行这个任务了。下面，让我们来看一下 gulp-horrendous 中的几个常用的任务：
编译 Less
编译 Less 文件只需要使用 gulp-less npm 包即可。这是一个很简单的任务，我们只需要先安装 gulp-less：
npm install gulp-less --save-dev
然后，在 gulpfile.js 文件中加入如下代码：
var gulp = require('gulp');
var gulpLess = require('gulp-less');
gulp.task('compile-less', function() {
return gulp.src('less/**/*.less')
.pipe(gulpLess())
.pipe(gulp.dest('css'));
});这个任务的作用就是将 less 目录下的所有 .less 文件编译成 .css 文件，并输出到 css 目录下。使用命令行输入：
$ gulp compile-less
即可执行该任务。
压缩图片
压缩图片是一个十分常见的任务。我们可以使用 gulp-imagemin 来执行这个任务。首先需要安装 gulp-imagemin：
npm install gulp-imagemin --save-dev
之后，在 gulpfile.js 中加入如下代码：
var gulp = require('gulp');
var gulpImagemin = require('gulp-imagemin');
gulp.task('compress-images', function() {
return gulp.src('images/*')
.pipe(gulpImagemin())
.pipe(gulp.dest('images-dist'));
});这个任务的作用就是将 images 目录下的所有图片进行压缩，并输出到 images-dist 目录下。
转译 ES6
转译 ES6 是我们前端开发中经常需要做的任务。我们可以使用 babel 来执行该任务。首先需要安装 babel：
npm install --save-dev gulp-babel babel-preset-env
之后，在 gulpfile.js 中加入如下代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------- - ----------------------
-------------------------- ---------- -
------ --------------------
-----------------
-------- -------
---
-------------------------
---这个任务的作用就是将 src 目录下的所有 .js 文件转换成 ES5 语法，并输出到 dist 目录下。
总结
gulp-horrendous 是一款十分实用的自动化构建工具，它可以提高前端开发人员的工作效率，并减少出错概率。通过本文的介绍，相信大家已经可以掌握 gulp-horrendous 的基本用法，能够更好地集中精力开发业务逻辑，而无需担心繁琐的构建任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b281e8991b448e2f7a