作为前端开发者，我们经常需要使用 gulp 来帮助我们进行自动化构建，而 love-gulp-good 这个 npm 包则为我们提供了更加方便、高效的 gulp 工作流。
安装 love-gulp-good
在开始使用 love-gulp-good 之前，我们需要先安装它：
npm install love-gulp-good --save-dev
使用 love-gulp-good
在安装完毕后，在项目的根目录中新建一个 gulpfile.js 文件，并在其中引入 love-gulp-good：
const good = require('love-gulp-good');然后，我们可以开始使用 love-gulp-good 提供的一些方法了。
good.clean
使用 good.clean 方法可以方便地清除指定目录下的文件：
gulp.task('clean', function() {
return good.clean(['dist']);
});上面的代码意味着我们将清除 dist 目录下所有的文件。
good.sass
使用 good.sass 方法可以方便地编译 Sass 文件：
gulp.task('sass', function() {
return good.sass('src/sass/**/*.scss', 'dist/css');
});上面的代码表示，我们将编译 src/sass 目录下所有的 .scss 文件，并将结果输出到 dist/css 目录下。
good.es6
使用 good.es6 方法可以方便地编译 ES6/ES7 代码：
gulp.task('js', function() {
return good.es6('src/js/**/*.js', 'dist/js');
});这段代码表示，我们将编译 src/js 目录下所有的 .js 文件，并将结果输出到 dist/js 目录下。
good.image
使用 good.image 方法可以方便地压缩图片：
gulp.task('image', function () {
return good.image('src/images/**/*', 'dist/images');
});这段代码意味着我们将压缩 src/images 目录下所有的图片，并将结果输出到 dist/images 目录下。
good.webpack
使用 good.webpack 方法可以方便地将多个模块打包成一个文件：
-- -------------------- ---- -------
-------------------- ---------- -
------ --------------
------ -----------------
------- -
--------- ---------
----- ----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
--
--
--
---
---这段代码表示，我们将打包 src/js/main.js 这个入口文件，并将结果输出到 dist/js/app.js 文件中。在打包的过程中，需要使用 babel-loader 将 ES6/ES7 代码转换为 ES5 代码。
示例代码
最后，我们来看一下如何将所有的任务结合起来，构建一个完整的项目：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - --------------------------
------------------ ---------- -
------ ---------------------
---
----------------- ---------- -
------ ------------------------------- ------------
---
--------------- ---------- -
------ -------------------------- -----------
---
------------------ ---------- -
------ ----------------------------- ---------------
---
-------------------- ---------- -
------ --------------
------ -----------------
------- -
--------- ---------
----- ----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
--
--
--
---
---
------------------ ---------- -
-------------------------------- ----------
---------------------------- --------
----------------------------- -----------
---
-------------------- --------- ------- ----- -------- ---------- ----------上面的代码意味着，我们将监听 src/sass、src/js 和 src/images 目录下的文件变化，当文件发生变化时自动执行对应的任务。同时，当我们执行 gulp 命令时，会默认执行 clean、sass、js、image、webpack 以及 watch 这些任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe481e8991b448dd864