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

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

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="resourcesviewsviewdirectory"

上面的例子就将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等有状态的调试功能