多设备同步界面环境搭建

工具

首先声明：本教程不适用于windows系统

步骤有点多，尽量精简~

1，配置nodejs

//安装，一行代码就够了
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
//随后关掉终端，再打开，输入
nvm --version       //查看版本
//看看有哪些新版本
nvm ls-remote
//假设最新的是V5.9.1
nvm install v5.9.1
//设置nodejs的默认版本
nvm alias default 5.9.1

2，安装gulp

//全局安装gulp
npm i -g gulp

然后创建项目，如果已经创建了，就直接进入就好, 进来之后还要执行一次上面的gulp安装命令，是的，要装两次！

$ mkdir project
$ cd project

$ npm init 
//生成一个 package.json 文件
$ npm i -D gulp 

3，安装browser-sync gulp-sass gulp-autoprefixer插件

npm i -D browser-sync gulp-sass gulp-autoprefixer

创建一个gulpfile.js文件，直接复制粘贴以下代码：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var reload      = browserSync.reload;
// 静态服务器 + 监听 scss/html 文件
gulp.task('server', ['sass'], function() {
    browserSync.init({
        server: "."
    });
    gulp.watch("src/style/*.scss", ['sass'], reload);
    gulp.watch("*").on('change', reload);
});
// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src("src/style/*.scss")
        .pipe(sass())
        .pipe(prefix())
        .pipe(gulp.dest("dist/"))
        .pipe(reload({stream: true}));
});
gulp.task('default', ['server']);

这样只要文件夹内有任何改动，页面都会立即刷新。

4，运行

直接命令行输入gulp即可弹出窗口运行，会自动打开项目文件夹内的index.html文件。

最后一步是查找IP

$ ifconfig | grep 192
//就会输出本机在局域网的IP了，例如：
inet 192.168.1.141 netmask 0xffffff00 broadcast 192.168.1.255

192.168.1.141就是IP了，在设备的浏览器上输入192.168.1.141:3000即可多屏浏览，当然，这些设备要连接着同一个网络才行，一改全改，非常方便。