美文网首页
000.laya 自动编译和刷新浏览器

000.laya 自动编译和刷新浏览器

作者: cmd_ts | 来源:发表于2020-02-26 18:17 被阅读0次

根据官方的教程,只能自动编译还不能自动刷新浏览器
1.先确保layaair2-cmd和gulp安装成功
2.node版本不能高于10以上,建议10.15
npm i layaair2-cmd -g
npm i gulp -g

https://ldc2.layabox.com/doc/?language=zh&nav=zh-ts-3-0-9#%E5%9B%9B%E3%80%81%E5%9C%A8VSCode%E4%B8%AD%E8%B0%83LayaAir%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7

根据官方的例程上,做了修改。
1.npm i browser-sync
2.npm i gulp 让工程安装gulp
3.在根目录创建一个gulpfile.js脚本文件

const {watch ,task } = require("gulp");
const {exec} = require("child_process");
const browserSync = require("browser-sync").create();
function compile(cb) {
    //执行编译命令 layaair2-cmd compile 
    console.log("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);
        browserSync.reload();
        cb();
    })
}
//创建一个名称为compile的gulp任务
task("compile", function(){
    /**
     * @ 监听src目录下的所有子目录的所有文件,
     * @ 延迟1000毫秒,才执行下次监听,避免手欠的同学,因连续保存触发多次连续编译
     * @ 监听生效后执行的函数
     */

    console.log("first");
    browserSync.init({
        server: "./bin"
    });

    watch('src/**/*.*', {delay:1000}, compile);
});

相关文章

  • 000.laya 自动编译和刷新浏览器

    根据官方的教程,只能自动编译还不能自动刷新浏览器1.先确保layaair2-cmd和gulp安装成功2.node版...

  • Webpack 优化开发体验

    Webpack Dev Server 集成了 自动编译 和 自动刷新浏览器 等功能。webpack-dev-ser...

  • webpac -devserver自动化配置

    devserver : 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器... 常用的配置有 所有webpac...

  • webpack进阶+调试

    一、开发服务器 devServer 功能:自动化工具(自动编译,自动打开并刷新浏览器)特点:只会在内存中编译打包,...

  • html-webpack-plugin插件

    一、说明webpack-dev-server实现了自动编译刷新浏览器,让编译出来的bundle.js托关于服务器根...

  • 03.creator快捷键自动编译脚本,并刷新浏览器

    由于简书不能上传附件,请跳下面链接进入道云笔记查看。 文档:1.快捷键自动编译脚本,刷新浏览器.not...链接:...

  • gulp实现前端自动化

    gulp是基于node的前端工具,可以对代码压缩,自动刷新页面,编译各种预处理器,给css加浏览器前缀,加版本号,...

  • Webpack 开发环境选择

    为了提高开发效率,我们会选择一个可监听文件的修改、可重新编译、并且可以自动刷新浏览器,这样可能还不满足,我们还需要...

  • 前端常用工具配置

    自动刷新浏览器 bower安装 安装cnpm gulp安装 Vue vue-devtools安装

  • webstorm整理使用技巧

    WebStorm8.0.3 Live Edit与Google浏览器实时无刷新自动加载页面

网友评论

      本文标题:000.laya 自动编译和刷新浏览器

      本文链接:https://www.haomeiwen.com/subject/cbqichtx.html