layAair2 以npm的方式运行，自动刷新浏览器

Mo_jo

已于 2023-09-28 16:43:30 修改

阅读量942

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layaAir gulp 文章标签： gulp npm typescript

于 2021-03-10 10:23:41 首次发布

本文链接：https://blog.youkuaiyun.com/Mo_jon/article/details/114628088

gulp 同时被 2 个专栏收录

2 篇文章

订阅专栏

layaAir

1 篇文章

订阅专栏

本文介绍如何使用 LayaAir IDE 创建项目，并通过 npm 安装 layaair2-cmd 实现项目的自动化编译及部署流程。文章详细解释了如何配置 VSCode 的工作流，包括安装必要的依赖包如 gulp 和 browser-sync，以及设置 gulpfile.js 来实现文件更改后的自动编译和浏览器刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LayaAirIDE安装 https://ldc2.layabox.com/layadownload/?type=layaairide，用 LayaAirIDE 创建项目

已 layaair2-cmd 方式运行项目（项目根目录执行以下步骤）

npm i layaair2-cmd -g VSCode高效开发工作流配置指南
layaair2-cmd -v 看到版本号，说明安装成功了。
layaair2-cmd compile 编译（如有报错，安装 node10）

npm init	初始化
npm i gulp browser-sync --save-dev	安装 gulp browser-sync

添加gulpfile.js

const { watch } = require('gulp');
const { exec } = require('child_process');
const browserSync = require('browser-sync');
function defaultTask(cb) {
    /** 启动服务根目录 */
    browserSync({
        server: './bin',
    });
    /** 监听src目录下所有变化，延迟100毫秒执行下次监听*/
    watch('src/**/*.*', { delay: 100 }, function (cb) {
        //执行编译命令 layaair2-cmd compile
        exec('layaair2-cmd compile').on('exit', () => {
            // 刷新浏览器
            browserSync.reload();
            cb();
        });
    });
  }
  exports.default = defaultTask

修改package.json

"main": "gulpfile.js",
"scripts": {
 	"start": "gulp",
},

npm run start 现在可以这样运行项目了，试试浏览器自动刷新吧