热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端开发梦中景象支持手机上任何移动浏览器网页开发设计调试

曾几何时,一直梦想能够有超酷的前端开发环境,加快工作进度,减轻工作强度,看了这张图有些震撼了,慢慢研究他们是怎么玩的。。。varprojectrootabsdirhomevagra

 曾几何时,一直梦想能够有超酷的前端开发环境,加快工作进度,减轻工作强度,看了这张图有些震撼了,慢慢研究他们是怎么玩的。。。

前端开发梦中景象-支持手机上任何移动浏览器网页开发设计调试

var projectrootabsdir = '/home/vagrant/Code/kidsit/';
gulp.task('less',function(){
    var pagelessentry = config.pagelessentry;
    log(pagelessentry);
   return gulp
       .src(pagelessentry)
       .pipe(plumber())
       .pipe(expect({ checkRealFile: true },pagelessentry))
       .pipe(printfileinfo())
       
       // .pipe(sourcemaps.init())
       .pipe(less())
       // .pipe(rename('bootstrap.css'))
       // .on('error',errorhandler)
       // .pipe(sourcemaps.write())
       .pipe(gulp.dest(projectrootdir+'public/build/css/'));
});

function startBrowserSync () {
    if(browserSync.active){
        return;
    }
    log('starting browser-sync ...');
    var optiOns={
        proxy: 'kidsit.cn',
        files: [projectrootabsdir+'public/build/css/**/*.css'], //projectrootdir+'public
        ghostMode: {
            clicks: true,
            location: false,
            forms: true,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'kidist-browser-sync',
        notify: true,
        reloadDelay: 0
    };
    browserSync(options);

}
gulp.task('watchless',function(){//entry task to be launched
    log(config.lessfiles);
    gulp.watch('../Code/kidsit/resources/assets/less/**/*.less', ['less'])
        .on('change',function (event) {
            // var srcPattern = new RegExp('/.*(?=/')
            log(event.type);
        }); 
    startBrowserSync();
    
});

注意:browsersync的file watch功能只对绝对地址的文件有效,不能使用relative path的格式,否则files section无效!

如何使用browsersync proxy laravel的前端开发?

当你在使用laravel或者其他的后端框架开发时,前端页面往往由后端生成传给浏览器,并不是静态的html,这时如何快速设计前端的页面?这时最好就要使用browser-sync的proxy功能了:

browser-sync start --proxy="homestead.localhost"  --files="resources\views\viewdirectory"

上面的例子就将proxy local dev 环境,并且watch 对应的view目录,一旦view目录中的文件变更,browsersync都将reload,提高开发的效率

总结几种工作模式:

1. http://192.168.1.x 模式访问(可以在局域网内任何机器访问web服务器)+ webpack dev host:8080/xxx.js   可以通过HMR即改即看前端效果, 如果enable vConsole则可以在mobile上产看js的log,查看dom结构

该模式下,注意apache必须使用require all granted, 否则只能本地访问,其他机器访问被拒绝!!

2. http://ngrok.dnsname模式访问本地web服务器 + webpack dev host:8080/xxx.js 既可以调试后端internet回调,又可以通过本地HMR即改即看前端效果, 如果enable vConsole则可以在mobile上产看js的log,查看dom结构

以上两种模式无法调试移动端的css,但是也可以利用webpack快速改,看效果

3. ghostlab起一个服务器,模拟任何页面,serve来自任何设备的访问(可以包含webpack dev host:8080/xxx.js),这个的好处是可以调测任何移动端的css,并且能够多部设备同时测试,甚至支持任何填表单,COOKIE等有状态的调试功能


推荐阅读
  • 为何Compose与Swarm之后仍有Kubernetes的诞生?
    探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ... [详细]
  • Python3爬虫入门:pyspider的基本使用[python爬虫入门]
    Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
  • Awk是一款功能强大的文本分析与处理工具,尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录,并按照指定的字段分隔符来划分和处理这些记录,从而实现复杂的数据操作。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 汇编语言标识符和表达式(四)(表达式与符号定义语句)
    7、表达式表达式是程序设计课程里的一个重要的基本概念,它可由运算符、操作符、括号、常量和一些符号连在一起的式子。在汇编语言中,表达式分为:数值表达式和地址表达式。(1)进制伪指令R ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • 解决UIScrollView自动偏移问题的方法
    本文介绍了一种有效的方法来解决在使用UIScrollView时出现的自动向下偏移的问题,通过调整特定的属性设置,可以确保滚动视图正常显示。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • 本文详细介绍了如何在 Ubuntu 14.04 系统上搭建仅使用 CPU 的 Caffe 深度学习框架,包括环境准备、依赖安装及编译过程。 ... [详细]
author-avatar
____L振豪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有