前端開發夢中景象-支援手機上任何移動瀏覽器網頁開發設計除錯

世有因果知因求果發表於2015-10-20
前端瀏覽器網頁除錯

　曾幾何時，一直夢想能夠有超酷的前端開發環境，加快工作進度，減輕工作強度，看了這張圖有些震撼了，慢慢研究他們是怎麼玩的。。。

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等有狀態的除錯功能

相關文章