在官方文档中，已经介绍了如何用gulp在VS code中实现监听代码变化，保存后自动编译。
VSCode高效开发工作流配置指南
但是我们还需要手动启web服务，手动刷新。
这里又在此基础上，进一步添加了gulp-connect，实现
①启动一个web服务
② 编译结束后，刷新浏览器。

请在完成VSCode高效开发工作流配置指南之后，继续操作。
①安装gulp-connect: npm install --save-dev gulp-connect
②按下面改造gulpfile.js
安装完成之后，现在你只需要执行gulp命令，在浏览器中打开http://localhost:8081/
如果你使用的是双屏，你将会不需要操作编码以外的任何操作，修改代码后，编译刷新浏览器一条龙服务。

我们离项目工程化，自动化又更近了一步。
[code]const gulp = require('gulp');

const connect = require('gulp-connect');
const { exec } = require("child_process");

//源码
const entry = 'src/**/*.*';

function compile() {
    //执行编译命令 layaair2-cmd compile 
    let process = exec("layaair2-cmd compile");
    process.stdout.on("data", (data) => {
        console.log(data);
    });
    process.stderr.on("data", (data) => {
        console.error(data);
    });
    process.on("exit", (code, signal) => {
        console.log("success");
        // console.log(code, signal);
        // 编译结束，触发reload，浏览器会自动刷新
        gulp.src(entry).pipe(connect.reload());
    })
}

gulp.task('connect', function () {
    connect.server({
        root: './bin/',//服务根目录，按需设定，可以设定./
        livereload: true,
        port: 8081
    });
});
gulp.task("watch", function () {
    /**
     * @ 监听src目录下的所有子目录的所有文件，
     * @ 延迟1000毫秒，才执行下次监听，避免手欠的同学，因连续保存触发多次连续编译
     * @ 监听生效后执行的函数
     */
    console.log("start watch");
    gulp.watch('src/**/*.*', { delay: 1000 }, compile);
});
gulp.task('default', ['connect', 'watch']);[/code]