1.背景
通常情况下我们在做项目时都是在LayaAir IDE下进行调试和开发的。通常情况不会接触到typescript的“编译”和bundle过程。这节我们要深入了解其中的过程，并剥离出来，能够在VsCode中直接运行项目，实时编译调试。

2.LayaAir的编译流程
打开LayaAirIDE的文件夹

LayaAirIDE_beta\resources\app\out\vs\layaEditor\laya\code\ts\empty

我们创建空项目时会应用这个套模板，直接再IDE中编译时会使用IDE自带的node环境和插件。在.laya/compile.js中可知道使用的是gulp和rollup进行文件的编译的。

// v1.2.5
//是否使用IDE自带的node环境和插件，设置false后，则使用自己环境(使用命令行方式执行)
const useIDENode = process.argv[0].indexOf("LayaAir") > -1 ? true : false;
const useCMDNode = process.argv[1].indexOf("layaair2-cmd") > -1 ? true : false;

function useOtherNode(){
    return useIDENode||useCMDNode;
}
//获取Node插件和工作路径
let ideModuleDir = useOtherNode() ? process.argv[1].replace("gulp\\bin\\gulp.js", "").replace("gulp/bin/gulp.js", "") : "";
let workSpaceDir = useOtherNode() ? process.argv[2].replace("--gulpfile=", "").replace("\\.laya\\compile.js", "").replace("/.laya/compile.js", "") : "./../";

const gulp = require(ideModuleDir + "gulp");
const rollup = require(ideModuleDir + "rollup");
const typescript = require(ideModuleDir + 'rollup-plugin-typescript2');//typescript2 plugin
const glsl = require(ideModuleDir + 'rollup-plugin-glsl');
const path = require('path');
const fs = require('fs');
// 如果是发布时调用编译功能，增加prevTasks
let prevTasks = "";
if (global.publish) {
    prevTasks = ["loadConfig"];
}

gulp.task("compile", prevTasks, function () {
    // 发布时调用编译功能，判断是否点击了编译选项
    if (global.publish) {
        workSpaceDir = global.workSpaceDir; // 发布时调用编译，workSpaceDir使用publish.js里的变量
        let forceCompile = !fs.existsSync(path.join(workSpaceDir, "bin", "js", "bundle.js")); // 发布时，并且没有编译过，则强制编译
        if (!global.config.compile && !forceCompile) {
            return;
        }
    }

    return rollup.rollup({
        input: workSpaceDir + '/src/Main.ts',
        onwarn:(waring,warn)=>{
            if(waring.code == "CIRCULAR_DEPENDENCY"){
                console.log("warnning Circular dependency:");
                console.log(waring);
            }
        },
        treeshake: false, //建议忽略
        plugins: [
            typescript({
                tsconfig:workSpaceDir + "/tsconfig.json",
                check: true, //Set to false to avoid doing any diagnostic checks on the code
                tsconfigOverride:{compilerOptions:{removeComments: true}},
                include:/.*.ts/,
            }),
            glsl({
                // By default, everything gets included
                include: /.*(.glsl|.vs|.fs)$/,
                sourceMap: false,
                compress:false
            }),
            /*terser({
                output: {
                },
                numWorkers:1,//Amount of workers to spawn. Defaults to the number of CPUs minus 1
                sourcemap: false
            })*/        
        ]
    }).then(bundle => {
        return bundle.write({
            file: workSpaceDir + '/bin/js/bundle.js',
            format: 'iife',
            name: 'laya',
            sourcemap: false
        });
    }).catch(err=>{
            console.log(err);
        
    })
});[/code][size=008]打开.vscode/launch.json可知道使用的是Debugger for Chrome插件来调试[/size]
[code]{
    "version": "0.2.0",
    "configurations": [ 
        {
            "name": "chrome调试",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/bin/index.html",
            // "换成自己的谷歌安装路径，": 比如
            //window 默认安装路径为: "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
            //mac 系统上的默认安装路径为 "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
            // "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
            "runtimeArgs": [
                "--allow-file-access-from-files",
                " --disable-web-security"
            ],
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //假如谷歌调试报userDataDir不可用，请把谷歌安装路径取得管理员权限,或者更换${tmpdir}为其他可以读写的文件夹，也可以删除。
            "userDataDir": "${workspaceRoot}/.laya/chrome",
            "sourceMapPathOverrides": {
                "src/*": "${workspaceRoot}/src/*"
            }       
        }
    ]
}

3.gulp实时编译剥离

在传统的laya项目开发流程中，通常是在修改完代码后，点击IDE中的Chorme编译，然后等待一段时间后，才能打开浏览器进行调试。 其实这个过程是可以进一步优化的，通过watch代码的更新来及时重新编译，并刷新浏览器。

3.1 launch和task配置

{
    "version": "0.2.0",
    "configurations": [ 
        {
            "name": "chrome调试",
            "type": "chrome",
            "request": "launch",
            "trace": true,
            "smartStep": true,
            "file": "${workspaceRoot}/bin/index.html",
            "runtimeArgs": [
                "--allow-file-access-from-files",
                "--allow-file-access-frome-files",
                "--disable-web-security"
            ],
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "fixedPort":false,
            "sourceMapPathOverrides": {
                "src/*": "${workspaceRoot}/src/*"
            },  
            "preLaunchTask": "gulp" 
        },
        {
            "name": "chrome混淆",
            "type": "chrome",
            "request": "launch",
            "trace": true,
            "smartStep": true,
            "file": "${workspaceRoot}/bin/index.html",
            "runtimeArgs": [
                "--allow-file-access-from-files",
                "--allow-file-access-frome-files",
                "--disable-web-security"
            ],
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "fixedPort":false,
            "sourceMapPathOverrides": {
                "src/*": "${workspaceRoot}/src/*"
            },  
            "preLaunchTask": "uglify"   
        },
        {
            "name": "实时编译",
            "request": "launch",
            "type": "pwa-chrome",
            "trace": true,
            "smartStep": true,
            "url": "http://localhost:1688",
            "runtimeArgs": [
                "--allow-file-access-from-files",
                "--allow-file-access-frome-files",
                "--disable-web-security"
            ],
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}/bin",
            "sourceMapPathOverrides": {
                "src/*": "${workspaceRoot}/src/*"
            },
        },
    ]
}

task.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "gulp",
            "type": "shell",
            "command": "gulp",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "uglify",
            "type": "shell",
            "command": "gulp uglify",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "watch",
            "type": "shell",
            "command": "gulp watch",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
    ]
}

3.2 gulpfile
项目文件夹下安装好gulp和所需要的的库
[code]//引用插件模块

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var tsify = require("tsify");
let uglify = require('gulp-uglify-es').default;
const watchify = require("watchify");
const gutil = require("gulp-util");
const connect = require('gulp-connect');

// ------------------------------------实时编译-----------------------------

const watchedBrowserify = watchify(browserify({
    debug: true,
    entries: ['src/Main.ts'],
    cache: {},
    packageCache: {}
}).plugin(tsify));

function browserifyBundle() {
    return watchedBrowserify
    .bundle()
    //使用source把输出文件命名为bundle.js
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({
        loadMaps: true
    }))
    .pipe(sourcemaps.write('./'))
    //把bundle.js复制到bin/js目录
    .pipe(gulp.dest("bin/js"))
    .pipe(connect.reload());
}

// 定义livereload任务
gulp.task('connect', function () {
    connect.server({
        root: "./bin",
        livereload: true,
        port: 1688
    });
});

gulp.task("browserify", function() {
    return browserifyBundle();

})

gulp.task("watch", gulp.series('browserify', 'connect'));
watchedBrowserify.on("update", browserifyBundle);
watchedBrowserify.on("log", gutil.log);

// ------------------------------------默认编译-----------------------------

//使用browserify，转换ts到js，并输出到bin/js目录

gulp.task("default", function () {
    return browserify({
            //是否开启调试，开启后会生成jsmap，方便调试ts源码，但会影响编译速度
            debug: true,
            entries: ['src/Main.ts'],
            cache: {},
            packageCache: {}
        })
        //使用tsify插件编译ts
        .plugin(tsify)
        .bundle()
        //使用source把输出文件命名为bundle.js
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({
           loadMaps: true
        }))
        .pipe(sourcemaps.write('./'))
        //把bundle.js复制到bin/js目录
        .pipe(gulp.dest("bin/js"));
});

gulp.task("uglify", function () {
    return browserify({
            //是否开启调试，开启后会生成jsmap，方便调试ts源码，但会影响编译速度
            debug: true,
            entries: ['src/Main.ts'],
            cache: {},
            packageCache: {}
        })
        //使用tsify插件编译ts
        .plugin(tsify)
        .bundle()
        //使用source把输出文件命名为bundle.js
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({
           loadMaps: true
        }))
        .pipe(uglify({mangle: false}))
        .pipe(sourcemaps.write('./'))
        //把bundle.js复制到bin/js目录
        .pipe(gulp.dest("bin/js"));
});[/code][size=008]使用时，先在项目文件夹执行gulp watch，在点击实时编译即可[/size]