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/
如果你使用的是双屏,你将会不需要操作编码以外的任何操作,修改代码后,编译刷新浏览器一条龙服务。
 
我们离项目工程化,自动化又更近了一步。
 
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']);
已邀请:

过简单生活

赞同来自:

这个居然没人回复?我试了下还是蛮方便的,补充一下 :gulp4和gulp3是不一样的 如果有报错用下面代码
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'));

要回复问题请先

商务合作
商务合作