[LayaAirIDE 2.0]VSCODE高效再+1，自动刷新
在官方文档中，已经介绍了如何用gulp在VS code中实现监听代码变化，保存后自动编译。
VSCode高效开发工作流配置指南
但是我们还需要手动启web服务，手动刷新。
这里又在此基础上，进一步添加了gulp-connect，实现
①启动一个web服务
② 编译结束后，刷新浏览器。
请在完成VSCode高效开发工作流配置指南之后，继续操作。
①安装gulp-connect: npm install --save-dev gulp-connect
②按下面改造gulpfile.js
安装完成之后，现在你只需要执行gulp命令，在浏览器中打开http://localhost:8081/
如果你使用的是双屏，你将会不需要操作编码以外的任何操作，修改代码后，编译刷新浏览器一条龙服务。
我们离项目工程化，自动化又更近了一步。
VSCode高效开发工作流配置指南
但是我们还需要手动启web服务，手动刷新。
这里又在此基础上，进一步添加了gulp-connect，实现
①启动一个web服务
② 编译结束后，刷新浏览器。
请在完成VSCode高效开发工作流配置指南之后，继续操作。
①安装gulp-connect: npm install --save-dev gulp-connect
②按下面改造gulpfile.js
安装完成之后，现在你只需要执行gulp命令，在浏览器中打开http://localhost:8081/
如果你使用的是双屏，你将会不需要操作编码以外的任何操作，修改代码后，编译刷新浏览器一条龙服务。
我们离项目工程化，自动化又更近了一步。
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']);
没有找到相关结果
已邀请:
要回复问题请先登录
1 个回复
过简单生活
赞同来自:
const gulp = require('gulp');
const { exec } = require("child_process");
const connect = require('gulp-connect');
//源码
const entry = 'src/**/*.*';
function compile(cb) {
//执行编译命令 layaair2-cmd compile
let process = exec("layaair2-cmd compile");
process.stdout.on("data", (data) => {
console.log(data);
});
process.stderr.on("data", (data) => {
console.log(data);
});
process.on("exit", (code, signal) => {
console.log("success");
console.log(code, signal);
// 编译结束，触发reload，浏览器会自动刷新
gulp.src(entry).pipe(connect.reload());
cb();
})
}
gulp.task('connect', function () {
connect.server({
root: './bin/',//服务根目录，按需设定，可以设定./
livereload: true,
port: 8081
});
});
//创建一个名称为compile的gulp任务
gulp.task("watch", function () {
/**
* @ 监听src目录下的所有子目录的所有文件，
* @ 延迟1000毫秒，才执行下次监听，避免手欠的同学，因连续保存触发多次连续编译
* @ 监听生效后执行的函数
*/
gulp.watch('src/**/*.*', { delay: 1000 }, compile);
});
// gulp.task('watch');
gulp.task('a', gulp.parallel('watch','connect'));