Gulp编译、合并、压缩，以及Browsersync实时刷新教程

之前项目中一直用的都是gulp-livereload，用gulp-webserver启服务器，来实现浏览器实时刷新，但是每一次更新代码重新编译有点慢。之后各种找原因改解决方案。

方案一：加入gulp-changed来监测文件是否改变过，如更改了index.less，只编译less。

方案二：不实时编译所有文件，只编译less文件，将目标目录放到项目目录内，项目上线之前在执行一次压缩合并的过程。

最终确定了如上两种方案，执行起来也只是快那么一丢丢，所以将之前看到过的Browsersync引入试试，一顿研究之后发现速度真快的可以！不仅快，Browsersync还有一个非常好用的功能：设备同步。当你的电脑和手机或者ipad连的相同wifi，可以在移动设备上访问相同ip相同端口，即可实现多设备同步。真的是同步哦，比如在pc端向下滚动了页面，其他设备也会一起滚动。或者更新了代码，所有设备都会实时刷新。

注意：此教程仅适用于较小的个人负责项目，并且开发目录结构与输出目录结构要相同，防止编译后资源路径找不到。

注二：我的机器为win10，webstorm可以自动保存代码，每次更新代码后ctrl+tab切换回浏览器就可以看见渲染结果，不用ctrl+s，不用f5，没有等待时间，不用手动打包，浏览器看见结果测试一下就可以直接发布上线。如果你也喜欢这样的开发模式，请仔细阅读下文内容。完整代码点击这里下载。

一、创建项目目录Landing、新建index.html，新建src文件夹，在src内新建images、less、js文件夹。