概述
gulpfile-preset 是一个npm包，提供了一些常见的gulp任务，可以快速建立一个新的gulpfile，并快速创建任务功能。
安装
安装使用npm安装
npm install gulpfile-preset
使用方式
- 在目录下创建一个配置文件 preset.js 。
-- -------------------- ---- -------
-----------
-------------- - -
-------- ------------
------ -
-------- -
------- ----------
------------ ------ --- ---------
---- --------
----- ----------
-
-
--
- 创建 gulpfile.js 文件。
-- -------------------- ---- ------- ------------- ----- ---- - ---------------- ----- --- - --------------------------- --------- - ----------- ----------- ---
- 运行预定任务
// 运行 build 任务 gulp build
核心 API
gfp(gulp, options): 加载 gulpfile-preset 插件gulp<Object>：gulp 对象- options <Object>
configName: 要加载的配置文件，例如configName: 'preset.js'cwd: 工作目录
gfp.preset(name): 加载预设name: 预设的名称
gfp.task(gulp, name, options): 创建任务gulp<Object>：gulp 对象name<String>: 任务名称options<Object>:preset: 要使用的预设名称desrciption: 任务描述src: 任务源文件dest: 任务输出目录
预设
gulpfile-preset 提供了预设功能，可供选择性使用。
默认的预设包括：
- clean
- css
- js
- images
- fonts
- watch
可以通过 gfp.preset([预设名称]) 命令加载预设。
-- -------------------- ---- ------- -------- ------------- ----- ---- - ---------------- ----- --- - --------------------------- ------------------ -------------------- ---------------
这个例子中，通过加载 css 预设，并创建名为默认的任务，执行 css:build 任务。
示例
使用 gulpfile-preset 生成一个静态网站的默认 gulpfile 配置文件。
先创建一个新的空文件夹，并通过
npm init命令初始化项目。在项目目录下通过
npm install gulpfile-preset browser-sync -D命令安装 gulpfile-preset 和 browser-sync （前置依赖）创建 preset.js 文件
-- -------------------- ---- -------
-------------- - -
-------- ----------- ------ ----- --------- ---------
------ -
-------- -
------- ----------
------------ ------ --- ---------
---- --------
----- ----------
--
------------ -
------- ------
------------ ------ --- --------
---- -------------
----- --------------
--
----------- -
------- -----
------------ ------ -- --------
---- -----------
----- -------------
--
--------------- -
------- ---------
------------ ------ ----- --------
---- ---------------- -------------
----- -----------------
--
-------------- -
------- --------
------------ ------ ---- --------
---- --------------
----- ----------------
--
-------- -
------- --------
------------ ------ ----- --- --------
-
-
--
- 创建 gulpfile.js 文件
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - ---------------------------------
----- --- - ---------------------------
--------- -
----------- -----------
---
-- ------- ----
-------------------- --------- ----------
-- ----- -----
------------------ --------------- -- -- -
---------------------------------- ---------------
------------------------------ --------------
------------------------------------------------------- ------------------- ------------------
-------------------------------- ---------------
----------------------------------------------------------- -----------------
---
-- ----------- --------
----------------------- -- -- -
------------------
------- -
-------- ----------
--
---------- ------
------- -----
---
---
- 执行默认任务
通过执行gulp 命令，即可启动预定任务 default，完成静态网站的 gulpfile 配置。
结语
gulpfile-preset 为我们创建gulp项目提供了方便快捷的途径。学习gulpfile-preset 的使用，可以设计自己的代码组织结构，更加清晰的理解项目的基础架构。名副其实地称为gulp的良师益友。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005566b81e8991b448d33f9