npm 包 brander-gulp-tasks 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

brander-gulp-tasks 是一个基于 gulp 的前端自动化构建工具的 npm 包，可以帮助开发者快速构建和打包项目，支持常见的前端技术，如：es6、scss、pug 等，同时也支持自定义任务和配置。

安装

在项目目录下执行以下命令安装 brander-gulp-tasks：

npm install --save-dev brander-gulp-tasks

使用

在项目根目录创建 gulpfile.js 文件，引入 brander-gulp-tasks：

const gulp = require('gulp');
const tasks = require('brander-gulp-tasks')(gulp);

运行 gulp 命令即可，此时 gulp 将执行默认任务（包括编译 es6、scss、pug 等任务）。
你也可以在 package.json 中添加 scripts 命令，如：
```
"scripts": {
  "dev": "gulp",
  "build": "gulp build"
}
```
之后可以使用 npm run dev 或 npm run build 来运行相应的 gulp 命令。

自定义任务

除了默认任务，brander-gulp-tasks 还支持自定义任务：

const gulp = require('gulp');
const tasks = require('brander-gulp-tasks')(gulp);

gulp.task('customTask', () => {
  // 自定义任务逻辑
});

执行自定义任务：

gulp customTask

配置

brander-gulp-tasks 默认配置如下：

-- -------------------- ---- -------
-
  -- ----
  ---- --------
  ----- ---------
  ---- --------

  -- -----
  ---- -
    ----- -------- -- --- -----
    --- ------ -- --- -----
    ---- ------- -- ---- -----
  --

  -- -----
  ------ -
    --- ---------- -- -------
    ---- ------------ -- -------
  --

  -- ----------- --
  -- ---------------------------------------
  ------------- -
    ------- -
      -------- ---------
    --
    ----- -----
    --------- ---------
    --- ------
    -------- ----------
    ---------------- -----
    -------------- -----
  --
-

任何配置项都可以被覆盖，可以在 gulpfile.js 中自定义配置：

const gulp = require('gulp');
const tasks = require('brander-gulp-tasks')(gulp, {
  dest: './public',
  browser_sync: {
    port: 3000,
    browser: 'chrome'
  },
});

示例代码

下面是一个完整的例子，包括自定义任务、自定义配置以及使用 browsersync 实时预览。

-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------------------- -
  ----- -----------
  ------ -
    --- ----------- -- ----- -- ---
  --
  ------------- -
    ----- -----
  --
--

-- -----
----------------------- -- -- -
  -----------------------------------------
      ------------------------------------------------
---

-- ------
------------------ -- -- -
  ------------------------------------------ ---------
  ------------------------------------------- ----------
  ----------------------------------------- ---------
---

-- -- -----------
------------------------ -- -- -
  --------------------
---

-------------------- --------------- ----------
------------------ -------------- ------ ------- --------

总结

brander-gulp-tasks 是一个非常好用的前端构建工具，在前端开发过程中，我们可以通过它来自动进行代码转换、打包、预处理等，从而提升开发效率。同时，其内置的常用的功能和灵活的配置方式也使得它可以适应不同团队的需求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4ea8