简介
@lojaskd/gulp-tasks 是一个 npm 包，提供了一些 gulp 任务来帮助前端开发者进行项目开发。该包内置了一些特定的 gulp 任务，如：编译 Sass、打包 JS、在开发环境下启动一个 Web 服务器等。使用该包，可以节省时间和精力，专注于业务逻辑的开发。
安装
使用 npm 命令可以很方便地安装 @lojaskd/gulp-tasks。
--- ------- ------------------- ----------
安装完成之后，可以在项目的 package.json 文件中看到该包已经被安装。
使用
@lojaskd/gulp-tasks 包含了很多基本的任务和配置，可以直接使用。例如，通过运行以下代码可以编译 Sass：
----- ---- - ----------------
----- --------- - -------------------------------
------------------
---- -----------------------
----- -------------
------------ ------------
---
在上面的代码中，使用 gulpTasks.styles 方法，传入一个对象作为参数。其中，src 属性指定需要编译的 Sass 文件的路径，dest 属性指定将编译结果输出到哪个目录，outputStyle 属性指定编译结果采用何种输出方式（例如：压缩或展开）。
如果需要打包 JS，可以通过以下代码实现：
----- ---- - ----------------
----- --------- - -------------------------------
--------------
---- -------------------
----- ------------
----------- ---------------
---
在上面的代码中，使用 gulpTasks.js 方法，传入一个对象作为参数。其中，src 属性指定需要打包的 JS 文件的路径，dest 属性指定将打包结果输出到哪个目录，outputName 属性指定打包结果的文件名（如果不指定，则默认为 bundle.js）。
高级用法
除了基本的任务之外，@lojaskd/gulp-tasks 还支持更多高级用法。下面介绍一些常用的高级用法。
自定义任务
@lojaskd/gulp-tasks 中已经包含了很多基本的任务，但有时候可能需要自定义任务来满足特殊的需求。可以通过 gulp.series 和 gulp.parallel 组合来组建自定义任务。
例如，在编译 Sass 文件之前需要先清除一下之前编译的结果，可以通过以下代码实现：
----- ---- - ----------------
----- --------- - -------------------------------
---------------------- ---------- -
------ ------------------------------- ------ -------
-------------------------
---
------------------- ------------------------ ---------- -
------ ------------------
---- -----------------------
----- -------------
------------ ------------
---
----
在上面的代码中，首先定义了一个名为 clean-css 的任务，通过使用 gulpTasks.clean() 方法来清除指定的文件。然后，在使用 gulpTasks.styles() 方法编译 Sass 文件之前，将 clean-css 任务添加到 gulp.series 中。
自定义配置
如果需要使用除了默认配置之外的配置信息，可以通过创建一个配置文件来实现。
在项目根目录中新建一个名为 gulpfile.js 的文件，并导入 gulp 和 @lojaskd/gulp-tasks 包。然后，定义一个名为 config 的变量，将所有的配置信息放入其中。最后，将 config 对象作为参数传递给 gulpTasks() 方法即可。
以下是一个例子：
----- ---- - ----------------
----- --------- - -------------------------------
----- ------ - -
---- -
------- --------------------------
-------- ----------------------
------- -----------------------------------------
--
----- -
------- ---------------
-------- --------------
------- --------------
-
--
------------------
在上面的代码中，定义了一个名为 config 的变量，其中有 src 和 dest 两个属性，表示源文件路径和输出目录路径。
自定义任务配置
如果需要对个别任务进行自定义配置，则可以在传递 config 参数时，将自定义的任务配置放入其中。
以下是一个例子：
----- ---- - ----------------
----- --------- - -------------------------------
----- ------ - -
---
------- -
------------ -----------
--------- -----
--
---
--
------------------
在上面的代码中，将样式表编译的输出方式从默认的 compressed 改为 expanded，并且禁用了自动前缀功能。其他任务也可以通过这种方式进行自定义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bc8967216659e2445ec