澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:移动端开发真机调试神

移动端开发真机调试神器

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

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

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

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

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

前端自动化之——自动实时刷新,应运而来!

gulp是啥?官方的解释是基于流的自动化构建工具。好,那什么是流呢?这个流是从英语单词stream翻译过来的,不过还是不好理解。其实可以这么理解,流就是工厂的一个生产车间生产出来的半成品,一个个半成品在输送带上送往下一个加工车间的过程。把运动的半成品看成是数据,那么流动的数据就是流。唉!好难解释啊!还是看代码吧。我已经把代码上传到github了,需要的同学自取,麻烦点个小星星 https://github.com/NicknameID...

前提:已安装nodejs和cnpm(用nodejs自带的npm亦可)。

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~并且环境已经搭好]

首先,我们新建一个名为“refresh”的文件夹,存储在电脑硬盘,比如D盘。

1.依赖npm

1、切换到测试文件夹下,初始化生成package.json

cnpm init -y

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

 

结构如下解析所示:

由于npm在国内比较慢,所以推荐大家使用淘宝的cnpm或者tnpm,在国内访问比较快(搞不懂国家为什么立堵墙,难受)。

2、安装必要的扩展包

// browser-sync用于热更新,gulp用于自动化构建,babel相关用于将es6代码转换为es5

cnpm install --save-dev browser-sync gulp

cnpm install --save-dev gulp-babel babel-preset-env babel-core

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: '', //此处根据项目实际目录填写 }); //本地静态文件 // 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 }

refresh---|--->html

澳门新浦京娱乐场网站 1

3、创建.babelrc文件

// .babelrc文件内容

{ 'presets':['env'] }

4.打开终端,在项目目录下输入命令   gulp browser-sync,出现以下形式

澳门新浦京娱乐场网站 2

此时浏览器会自动打开 的页面,这与上面gulpfile.js设置的一样。

在手机(真机),只需要输入命令行中的  External 的网址即可看到要调试的页面了。而且,这个是多个浏览器统一的,你在电脑上滑动,点击,手机上都会执行相应的效果。同理,手机上的操作,电脑也会执行相应的效果。

注意:如果是用webstom自带的服务器开的网站的话,webstom还需要设置一下,勾选以下内容[使用webstom打开的页面默认为服务器打开的页面]

澳门新浦京娱乐场网站 3

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

|--->styles--->*.css

2.cnpm init 初始化package.json文件

4、创建gulpfile.js文件

// gulpfile.js文件(假设源文件目录为src,生成后目录为dist)

var gulp=require('gulp');

var browserSync=require('browser-sync').create();

var babel=require('gulp-babel');

var reload=browserSync.reload;

gulp.task('browser-sync',['es2015'],function(){

         browserSync.init({ server:'./' });

         gulp.watch('./src/*.js',['es2015']);

         gulp.watch('./src/*').on('change',reload);

});

gulp.task('es2015',function(){

         return gulp.src('./src/*.js') .pipe(babel()) .pipe(gulp.dest('./dist'));

});

gulp.task('default',['browser-sync']);

5.调试:

在浏览器打开  http://localhost:3001,进入到以下页面
澳门新浦京娱乐场网站 4

勾选,remote debugger,之后点击 opens in a new tab,即可跳转到 weinre 页面。在weinre上审查元素的时候,手机上都会有相应的变化。

这里要注意一点:待调试页面要先启动后,再勾选 remote debugger,否则会由于获取不到而无法调试。

经过以上5个步骤,就可以在真机上调试了~

打赏支持我写出更多好文章,谢谢!

打赏作者

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

  • 引入组件

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

  • 添加任务

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

 

|--->scripts--->*.js

-y的作用可以跳过询问步骤直接生成默认的package.json文件

5、启动测试服务器

gulp

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

澳门新浦京娱乐场网站 5 澳门新浦京娱乐场网站 6

2 赞 11 收藏 3 评论

4.打开终端,在项目目录下输入命令   gulp browser-sync,出现以下形式

澳门新浦京娱乐场网站 7

此时浏览器会自动打开

在手机(真机),只需要输入命令行中的  External 的网址即可看到要调试的页面了

而且,这个是多个浏览器统一的,你在电脑上滑动,点击,手机上都会执行相应的效果。同理,手机上的操作,电脑也会执行相应的效果。

 

注意:如果是用webstom自带的服务器开的网站的话,webstom还需要设置一下,勾选以下内容[使用webstom打开的页面默认为服务器打开的页面]

澳门新浦京娱乐场网站 8

 

|--->image

澳门新浦京娱乐场网站 9

关于作者:陈被单

澳门新浦京娱乐场网站 10

热爱前端,欢迎交流 个人主页 · 我的文章 · 19 ·   

澳门新浦京娱乐场网站 11

5.调试:

在浏览器打开  :3001,进入到以下页面 

 澳门新浦京娱乐场网站 12

 勾选,remote debugger,之后点击 opens in a new tab,即可跳转到 weinre 页面。在weinre上审查元素的时候,手机上都会有相应的变化。

 这里要注意一点:待调试页面要先启动后,再勾选 remote debugger,否则会由于获取不到而无法调试。

 

 经过以上5个步骤,就可以在真机上调试了~ 

 

 

 

 

 

 

 

 

澳门新浦京娱乐场网站:移动端开发真机调试神器,浏览器自动实时刷新。 

 

 

 

 

 

 

之后,通过本地个人喜欢的编辑器,导入,打开,比如(Hbuilder)

3.安装依赖包

基础工作做好了,下面,开始搭建node环境

由于依赖包太多了,就不一个一个写了 主要通过 cnpm install --save-dev 包的名字的方式来安装的,

A.下载安装node(过程不表,直接按照google出来的next……next……)

下图所列的就是自动化工具要用的包,我已经上传到github上了点击这里获取,

B. 安装gulp自动化构建工具(

下载后只要 cnpm install就可以了,就会根据package.json里的依赖去下载安装

下面, 我们需要在项目中配置node服务

在package.json中添加gulp字段方便调用本地安装的gulp命令,到这里package.json配置好了.

当前文件夹打开dos,输入:node -v ,执行之后,显示V6.2.0,说明安装成功

澳门新浦京娱乐场网站 13

C.先生成packge.json文件

澳门新浦京娱乐场网站 14

dos窗口输入:npm (cnpm ) init

4.gulpfile.js文件的内容(重点

等走完执行命令,查看“refresh”文件夹多了一个 “package.json” 文件

功能1---自动化生成项目目录

内含

澳门新浦京娱乐场网站 15

{

//gulpfile.js/*首先在全局上加载gulp,这个很重要*/constgulp =require('gulp');/*在全局上定义项目的目录结构,供应后面使用*/constdirs = {  dist:'./dist',  src:'./src',  css:'./src/css',  less:'./src/less',  js:'./src/js',  img:'./src/img',};gulp.task('create-directory',()=>{constmkdirp =require('mkdirp');//这里要依赖mkdirp这个包,通过cnpm 安装for(letiindirs) {    mkdirp(dirs[i],err=>{      err ?console.log(err) :console.log('mkdir-->' dirs[i]);;    });  }});//在终端运行cnpm run gulp create-directory

"name": "refresh",

生成需要生成的项目目录,再也不用每次都去手工创建了,幸福感爆棚有木有!!!

"version": "1.0.0",

澳门新浦京娱乐场网站 16

"description": "",

功能2---编译less,并且实现less注入功能,热更新页面,方便开发时调试

"main": "index.js",

这个功能要依赖的插件有

"scripts": {

1.gulp-less

"test": "echo "Error: no test specified" && exit 1"

2.browser-sync

},

3.gulp-notify

"author": "",

4.gulp-plumber

"license": "ISC"

/*全局定义要处理的文件*/constfiles = {  lessFiles:'./src/less/go.less',  cssFiles:'./src/css/*.css',  jsFiles:'./src/js/*.js',  imgFiles:'./src/img/*.*'}//编译lessgulp.task('compile-less',()=>{constless =require('gulp-less');//依赖gulp-less的插件constnotify =require('gulp-notify');constplumber =require('gulp-plumber');constbrowserSync =require('browser-sync').create();//browser-sync同步服务器constreload = browserSync.reload;//将browser-sync的reload方法存起来,方便调用returngulp.src(files.lessFiles)  .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))//使用gulp-notify和gulp-plumber用来阻止因为less语法写错跳出监视程序发生.pipe(less())  .pipe(gulp.dest(dirs.css '/'))  .pipe(reload({stream:true}));});// 本地服务器功能,自动刷新(开发环境)gulp.task('server', ['compile-less'],()=>{constbrowserSync =require('browser-sync').create();constreload = browserSync.reload;  browserSync.init({    server:'./'});  gulp.watch(dirs.less '/**/*.less', ['compile-less']);//监视less文件夹中的所有less文件,有改动就调用compile-less任务编译lessgulp.watch('./*.html').on('change', reload);//监视html文件,有改动就刷新浏览器gulp.watch(dirs.js '/**/*.js').on('change', reload);//监视所有js文件有改动就刷新浏览器});//在cmd运行cnpm run gulp server

}

/*全局定义要处理的文件*/

constfiles = { lessFiles:'./src/less/go.less', cssFiles:'./src/css/*.css', jsFiles:'./src/js/*.js', imgFiles:'./src/img/*.*'}//编译

lessgulp.task('compile-less',()=>{constless =require('gulp-less');//依赖gulp-less的插件

constnotify =require('gulp-notify');constplumber =require('gulp-plumber');constbrowserSync =require('browser-sync').create();//browser-sync同步服务器

constreload = browserSync.reload;//将browser-sync的reload方法存起来,方便调用returngulp.src(files.lessFiles) .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))

//使用gulp-notify和gulp-plumber用来阻止因为less语法写错跳出监视程序发生.pipe(less()) .pipe(gulp.dest(dirs.css '/')) .pipe(reload({stream:true}));});// 本地服务器功能,自动刷新(开发环境)gulp.task('server', ['compile-less'],()=>{constbrowserSync =require('browser-sync').create();constreload = browserSync.reload; browserSync.init({ server:'./'}); gulp.watch(dirs.less '/**/*.less', ['compile-less']);//监视less文件夹中的所有less文件,有改动就调用compile-less任务编译lessgulp.watch('./*.html').on('change', reload);//监视html文件,有改动就刷新浏览器gulp.watch(dirs.js '/**/*.js').on('change', reload);//监视所有js文件有改动就刷新浏览器});//在cmd运行cnpm run gulp server

D.安装gulp

可以看到程序正在后台运行,正在监听文件改动

dos窗口输入:cnpm install gulp  --save-dev

澳门新浦京娱乐场网站 17

E.浏览器自动实时刷新

这样就可以左边开着编辑器写代码,右边开着浏览器看效果了,有木有很爽,人生别无他求了(感动中!!!),在跟目录下建立index.html的页面。

插件(browser-sync)   专门做浏览器自动刷新

澳门新浦京娱乐场网站 18

帮你自动 打开浏览器 ,并且 可以为你搭建一个web服务器,实时刷新。

功能3---添加浏览器私有前缀

F.安装browser-sync

要用到的插件包

dos窗口输入:cnpm install browser-sync --save-dev

1.gulp-postcss

这个时候,刷新下hbuilder目录结构,则如下显示

2.gulp-sourcemaps

{

3.autoprefixer

"name": "refresh",

//添加浏览器私有前缀(生产环境)gulp.task('autoprefixer',()=>{constpostcss =require('gulp-postcss');constsourcemaps =require('gulp-sourcemaps');constautoprefixer =require('autoprefixer');returngulp.src(files.cssFiles)    .pipe(sourcemaps.init())//添加sourcemap,方便调试.pipe(postcss([ autoprefixer() ]))//添加浏览器私有前缀,解决浏览器的兼容问题.pipe(sourcemaps.write('.'))    .pipe(gulp.dest(dirs.css '/'))});

"version": "1.0.0",

功能4---压缩css

"description": "",

要用到的插件包

"main": "index.js",

1.gulp-minify-css

"scripts": {

2.gulp-rename

"test": "echo "Error: no test specified" && exit 1"

// 压缩css(生产环境)gulp.task('minify-css',function(){constminifyCSS =require('gulp-minify-css');constrename =require("gulp-rename");returngulp.src(dirs.css '/**/*.css')    .pipe(minifyCSS({/*keepBreaks: true*/}))    .pipe(rename(path=>path.basename ='.min'))//重命名文件输出后的样式为 原文件名.min.css.pipe(gulp.dest('./dist/css/'))});

},

功能5---合并压缩JavaScript文件

"author": "",

要用到的插件包

"license": "ISC",

1.gulp-concat

"devDependencies": {

2.gulp-uglify

"browser-sync": "^2.18.5",

3.gulp-rename

"gulp": "^3.9.1"

// js文件--合并--压缩(生产环境)gulp.task('js-concat-compress',(cb)=>{letname ='';//先定义一个变量将用于后面存文件名constconcat =require('gulp-concat');constuglify =require('gulp-uglify');constrename =require("gulp-rename");returngulp.src(dirs.js '/**/*.js')  .pipe(rename(path=>{path.basename ='';name=path.basename;}))  .pipe(concat('bundle.js'))//合并js文件.pipe(uglify())//压缩js文件.pipe(rename(path=>{    path.basename = name '.' path.basename '.min';//改文件名加上 .min}))  .pipe(gulp.dest('dist/js/')); });

}

功能6---图片无损压缩

}

要用到的插件包

表示 “gulp”和“browser-sync”都安装成功了

1.gulp-imagemin

G:新建gulpfile.js配置文件

// 图片无损压缩gulp.task('img-handl',()=>{constimagemin =require('gulp-imagemin');returngulp.src(files.imgFiles)    .pipe(imagemin())//imagemin()里是可以写参数的,有需要的可以去github的页面看看.pipe(gulp.dest('./dist/img/'))});

进行编辑

功能7---项目的打包

var gulp=require("gulp");

有时候我们做完东西需要打包,方便传输,而有些文件又是不需要打包进去的,比如说node_modules文件夹,一键打包的快感体验过绝对会爱上的

var browserSync=require("browser-sync");

依赖的插件包

gulp.task("server",function(){

1.gulp-zip

browserSync.init({

// 项目打包(生产环境)gulp.task('zip',()=>{constzip =require('gulp-zip');returngulp.src(['./*.html','**/dist/**/*.*','!**/node_modules/**/*.*'])//这里需要注意的是,在写要打包的文件时,避免打包的文件不能写在开头,这里'!**/node_modules/**/*.*'放在了最后.pipe(zip('project.zip'))//打包后的文件名,自己随意取.pipe(gulp.dest('./'))});

"server":"./",

5.整理任务执行,方便调用任务

"port":"8686",

因为gulp执行任务时是以最大的任务并发数同时进行的,所以有时候我们需要按步骤进行,就需要插件gulp-sequence,将任务按顺序写入,就会按顺序执行

"files":[

写了这么多功能模块,需要好好的整理一下,方便调用。我已经把完整的代码上传到github了,需要的同学自取,麻烦点个小星星 https://github.com/NicknameID...

"./**/*.html",

// ------------------开发阶段命令----------------------------------------------------gulp.task('start', ['create-directory']);//项目初始化的第一个命令gulp.task('dev-watch', ['server']);//开始编写项目后开启服务器实时更新// ------------------生产阶段命令------------------------------------------------------gulp.task('prefixer', ['autoprefixer']);//给css文件添加浏览器私有前缀 files.cssFiles ==>> .src/css/gulp.task('min-css', ['minify-css']);//压缩css文件 files.cssFiles ==>> dist/css/gulp.task('js-handl', ['js-concat-compress']);//合js文件  dirs.js/**/*.js ==>> ./dist/js/concated.jsgulp.task('img-handl', ['img-handl'])//处理图片,对图片进行无损的压缩//----------------一键生成项目文件命令-----------------------------------------------//因为gulp执行任务时是以最大的任务并发数同时进行的,所以有时候我们需要按步骤进行,就需要插件`gulp-sequence`,将任务按顺序写入,就会按顺序执行const runSequence = require('gulp-sequence').use(gulp);gulp.task('bunld-project',runSequence('clean-dist','compile-less','autoprefixer','minify-css','js-concat-compress','img-handl','zip'))

"./styles"/*.css",

6.小结

"./scripts/*.js"

看到没有,使用gulp其实并没有用到很多本身的API,都是通过不同的插件来实现的处理过程,所以gulp更加像一个处理平台,而非大包大揽的处理程序,他只负责数据的流向,从pipe(管道)的这头流向另外一头,剩下的事情就交给各个插件了,像不像现代社会的细化分工。分工明确才能提高效率,这是社会发展的经验总结。文章有点长,感谢看完的小伙伴!!!

]

原文地址:https://segmentfault.com/a/1190000010428396#articleHeader5

});

});

gulp.task("default",function(){

gulp.start("server");

});

如上编辑好之后,进入dos窗口,输入

gulp 回车

则,浏览器自动打开当前index.html页面

这个时候,试着,去修改对应的样式文件,结构,之后,保存ctrl s.

双屏下表现,更为良好,左边修改,右边生效,好不痛快!

----转载自博客园乐少007

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:移动端开发真机调试神