0.前言

在对 VSCode 进行插件国际化的时候，官方对此没有任何说明文档，只是给了一个国际化的Demo（即， i18n-sample 这个案例）。在所有的VSCode开发体系中，并不是使用Webpack进行打包构建的，无论是源码工程还是插件均是使用的 gulp 构建工具。因此，学习使用 gulp 是 VSCode 插件开发中必不可少的一部分。

本篇博客基本上是 gulp中文网-quickStart (opens new window) 的概括总结，网络上大部分有关 gulp 的教程均是v3版本的代码，更多细节详见官方文档。

1.基础使用

基础使用步骤：

1. 创建 gulp 任务：

   创建 gulpfile.js 文件，或者在文件夹下创建 gulpfile/index.js 文件。

   该文件中需要编写待执行的task任务，具体写法请见下小节。

2. 执行：在终端输入 gulp 命令。

   gulp <task1> <task2> <task3>  # 执行多个任务
   

   如果直接输入gulp，默认执行

   gulp default # 等价于 gulp
   

2.task的创建

在 gulp 中创建 task 常用的有两种方式：

1. 新版（gulp v4）：使用 exports 导出的方式

   const gulp = require('gulp')
   const hello = cb =>{
       console.log("hello");
       cb()  // 注：没有任何return 时，需要显式调用 回调 函数。
   }
   
   module.exports.hello = hello
   

2. 老版的写法：gulp.task("name",(cb)=>{cb()})

   目前仍能兼容运行，但官方已不再推荐此写法。

   const gulp = require('gulp')
   gulp.task('hello', (cb) => {
       console.log('hello');
       cb()
   })
   

以下均按照 exports 导出的方式（写法一）进行叙述。

---

task 按照是否可以被 gulp 指令执行，可分为两类：

1. 可被 gulp <task> 执行，称为 public task
2. 不可执行被gulp 执行，但是可作为内部 task 使用。

具体区别就在于，是否被exports 导出：

// public task 遵循 commonJS 模块规范导出
function task1(cb) {
  // gulp v4版本在结束时必须运行下回调函数，
  // 否则会报：The following tasks did not complete
  // 关于当前 task 是否结束，请看后续章节。
  // 这一部分，非常像 mocha 中的 done 函数，必须在异步任务结束时调用 done()
  cb(); 
}
exports.build = build;

task 根据组织结构，可分为：并行 parallel()、串行 series()。

const { series,parallel } = require('gulp');
const javascript = (cb) => {
  // body omitted
  cb();
}

const css = (cb) => {
  // body omitted
  cb();
}

// task 的简单组合：
exports.default = parallel(javascript, css);
exports.default = series(javascript, css);

// task 的复杂组合：
exports.default = series(
  clean,
  parallel(
    cssTranspile,
    series(jsTranspile, jsBundle)
  ),
  parallel(cssMinify, jsMinify),
  publish
);

注：在对并行和串行进行组合时，需要保证串行和并行同时调用调用到的<task>不能同时执行，即一个 task 在同一时间段内仅允许被调用一次。

3.task 异步执行说明

在新版的gulp 中默认所有的task都是异步的，因此在编写时，必须手动通知gulp是否继续执行或结束。

1. 无 return 时，且无异步任务

   const hello = (cb) => {
     cb()
   }
   module.exports.hello = hello
   

2. 无 return 时，且有异步任务，一般有两种方式：

   方法一：将 cb 函数显式传递下去

   const fs = require('fs');
   const passingCallback = (cb) => {
     fs.access('gulpfile.js', cb); // 需要将 cb 显式传递下去
   }
   exports.default = passingCallback;
   // fs.access 的使用： fs.access(path[, mode], callback)
   

   方法二：将异步任务使用 async 和 await 封装

   const fs = require('fs');
   async function asyncAwaitTask() {
     const { version } = fs.readFileSync('package.json');
     console.log(version);
     await Promise.resolve('some result'); // 通过 await 控制执行结果
   }
   
   exports.default = asyncAwaitTask;
   

3. 使用 return ：可以将stream、promise、child process 等六类数据传递下去。

   // 返回 stream (最常用)
   function streamTask(){
     return gulp.src("*.js").pipe(gulp.dest('out'))
   }
   
   // 返回 promise
   function promiseTask() {
     return Promise.resolve('the value is ignored');
   }
   
   // 返回 child process
   const { exec } = require('child_process');
   function childProcessTask() {
     return exec('date');
   }
   
   exports.promiseTask = promiseTask;
   exports.promiseTask = promiseTask;
   exports.childProcessTask = childProcessTask;
   

4.实用插件整理

以下主要总结了在开发 VSCode 插件过程中使用到的一些 gulp 插件。

const  gulp = require('gulp');            //引用gulp
const  del = require('del');              //引用 gulp 删除插件
const  uglify = require('gulp-uglify');　　//引用压缩 Js 插件
const  css = require('gulp-clean-css');　　//gulp 压缩 css 文件
const  rename = require("gulp-rename");　　//引用重命名插件
const typescript = require('typescript');  //需要与 gulp-typescript 搭配使用
const ts = require('gulp-typescript');     //可以对 ts 代码进行转化
const nls = require('vscode-nls-dev');     //VSCode 插件国际化（开发环境）
const es = require('event-stream');        //Node中对 流 的处理
const sourcemaps = require('gulp-sourcemaps');// 添加source Maps

5.总结

本篇博客是对官网快速上手的总结：

1. 在 gulpfile.js 或者 index.js 中编写 task 代码，在终端中输入 gulp 可以运行以上代码。

2. 新版 task 默认所有任务都是异步任务，这与老版的gulp 的写法存在较大差异。如果当前task 无异步回调时，需手动截止任务，如cb()。

3. 可以通过 gulp.series 或者 gulp.parallel 控制异步任务的 串行 或 并发 执行。

   注：对于串行和并发这块，在编码时还有额外限制，请见官网示例代码。

4. 最后给出目前在项目中已用到的一些 gulp 插件。

以上内容只是 gulp 简单上手使用，下一步计划继续写几篇博客记录gulp 实际开发示例。