gulp总结

gulp

gulp 是基于stream的自动化构建工具

官网 https://www.gulpjs.com.cn/

目录

• task
• series 按顺序依次执行task
• parallel 并行执行多个task
• 插件开发

gulp.task

task 任务,gulp中每个构建都封装为task,通过 gulp + task名执行 task是异步执行的任务，以下是创建一个task示例

gulp.task('copy', function (args, args2) {
   return gulp.src('bin/game.js')
      .pipe(gulp.dest('wxgame/js'));
});

该代码是创建一个将 bin/game.js 拷贝到 wxgame/js/game.js 的task。
此处只是声明构建流程，gulp.src读取game.js流，读取完后流到gulp.dest，
gulp.dest在处理写入到指定文件中。

通过以下方式执行:

 $gulp copy

当执行该task 时，文件流就按照以上方式进行处理，每一个过程都将返回
NodeJS.ReadableStream 流对象给下一个过程处理，直到构建结束。

series按顺序依次执行多个task

  gulp.task('A',()=>{
      ...
  })
  gulp.task('B',()=>{
      ...
  })
  gulp.task('C',()=>{
      ...
  })
    // 创建一个任务执行所有的任务
  gulp.task('all',  gulp.series('A','B','C'))

parallel并行执行多个task

  gulp.task('A',()=>{
      ...
  })
  gulp.task('B',()=>{
      ...
  })
  gulp.task('C',()=>{
      ...
  })
    // 创建一个任务执行所有的任务
  gulp.task('all',  gulp.parallel('A','B','C'))

注意:series , parallel 都称为组合操作，如果一个任务中发生错误，则不会运行后续任务

插件开发

在开发中我们可以自己创建gulp插件，比如微信小游戏分包工具，不同平台代码替换工具等等，以便于我们在不同平台下复用。

创建插件

1. 项目 node_modules 下创建 tool 文件夹
2. 创建index.js文件，内容如下

'use strict';

const through = require('through2');
const path = require('path');
const File = require('vinyl');
const Concat = require('concat-with-sourcemaps');

const tool = function (isExport) {
    // 得到流的时候处理
    function onFile(file, enc, callback) {
        if (file.isStream()) {
            this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
            return callback();
        }

        const contents = "" + file.contents;
        callback();
        this.emit("data",file);
    }
    
    function onEnd(callback{
        callback();
    }
        
    return through.obj(onFile,onEnd);
};
module.exports = tool;

• 插件使用
  gulpfile.js中添加以下代码

     // 引入插件
     const tool = require("tool");
     
     gulp.task('default', function (args, args2) {
       return browserify({
          basedir: '.',
          debug: false,
          entries: ['src/GameMain.ts'],
       })
          .plugin(tsify)
          .bundle()
          .pipe(source('wxgame.js'))
          .pipe(tool()) 
          .pipe(gulp.dest('wxgame/js'));
});

添加watch

watch 用于监视代码改变，这样我们就让游戏自动编译了。

/**
 * 启动一个监视任务
 */
gulp.task("watch", function () {
    var tsWatcher = gulp.watch(["src/**/*.ts*"], { delay: 1000, events: ["change"] }, () => {
        try {
            return roComple(); // 代码改变的时候执行的方法编译代码
        } catch (e) {

        }
    });
    return tsWatcher;
})