俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

移动端开发真机调试神器

移动端开发真机调试神器

2016/09/07 · 基础技术 · 3 评论 · 调试

本文作者: 伯乐在线 - 陈被单 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

前言:博主翻山越岭,找了很久的真机调试, 从老古董,weinre,到微信开发者工具,到最后的browser-sync,最后这个工具真的是眼前一亮~

本文默认前提:你已会使用gulp,npm,并且环境已经搭好

前言:博主翻山越岭,找了很久的 真机调试, 从老古董,weinre,到微信开发者工具,到最后的browser-sync,最后这个工具 真的是眼前一亮~

1.npm init

找到目录中的 package.json, 在文件中添加相关依赖包

JavaScript

"dependencies": { "async-each-series": "^1.1.0", "connect-history-api-fallback": "^1.3.0", "weinre": "^2.0.0-pre-I0Z7U9OV" }

1
2
3
4
5
"dependencies": {
  "async-each-series": "^1.1.0",
  "connect-history-api-fallback": "^1.3.0",
  "weinre": "^2.0.0-pre-I0Z7U9OV"
}

[本篇博客默认你已会使用gulp,npm~并且环境已经搭好]

2.npm install    安装相关依赖文件

 

3.新建gulpfile.js文件,添加下面相关代码

  • 引入组件

JavaScript

var browserSync = require('browser-sync').create(); //自动同步

1
var browserSync = require('browser-sync').create();  //自动同步
  • 添加任务

JavaScript

gulp.task('browser-sync',function () { var files = [ '**/*.html', '**/*.css', '**/*.js' ]; //代理模式(本地服务器) browserSync.init(files,{ proxy: 'http://localhost:63342/nonghui/extend.html?_ijt=5d9fjooo2tdvvf1uh6tb8qmlma#/index俄罗斯贵宾会,', //此处根据项目实际目录填写 }); //本地静态文件 // browserSync.init(files, { // server: { // baseDir: './src' //该路径到html的文件夹目录 // } // }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
gulp.task('browser-sync',function () {
    var files = [
        '**/*.html',
        '**/*.css',
        '**/*.js'
    ];
//代理模式(本地服务器)
    browserSync.init(files,{
        proxy: 'http://localhost:63342/nonghui/extend.html?_ijt=5d9fjooo2tdvvf1uh6tb8qmlma#/index',  //此处根据项目实际目录填写
    });
//本地静态文件
//     browserSync.init(files, {
//         server: {
//             baseDir: './src'   //该路径到html的文件夹目录
//         }
//     });
});

1.npm init      

找到目录中的 package.json, 在文件中添加相关依赖包

1 "dependencies": {
2   "async-each-series": "^1.1.0",
3   "connect-history-api-fallback": "^1.3.0",
4   "weinre": "^2.0.0-pre-I0Z7U9OV"
5 }

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:移动端开发真机调试神器

您可能还会对下面的文章感兴趣: