网站规划书包括哪些方面,安徽省工程建设监理协会网站,内网wordpress响应慢,建网站的软件前端实时可视化开发工具#xff1a;liveStyle、liveReload、Broswer-Sync。
一 、liveStyle http://livestyle.io/ 安装分两部分 浏览器和编辑器同时安装插件liveStyle 优点有以下几项#xff1a; 缺点也很明显
liveStyle 是针对样式的实时工具,包括css、less、sassliveStyle、liveReload、Broswer-Sync。
一 、liveStyle http://livestyle.io/ 安装分两部分 浏览器和编辑器同时安装插件liveStyle 优点有以下几项 缺点也很明显
liveStyle 是针对样式的实时工具,包括css、less、sass不能修改HTML和js文件。目前只适用于Google Chrome和Sublime Text如果你使用的是其他编辑软件的话就不一定那么好用了
二、liveReload http://livereload.com/ liveReload 工作的本质 是监控所有文件修改文件修改后刷新浏览器相当于帮你按了 F5 安装分两部分 浏览器安装 liveReload 和 本地安装 npm install -g livereload 启动 cd到项目文件夹下执行 livereload 优点
相比较liveStyle 而言liveReload 功能更丰富不仅包括csslesssass像imghtmljs等格式的文件同样也适用编辑器方面的选择更加多样支持gulpgrunt等工具的使用
缺点
相比较liveStyle 而言liveReload 修改是单向的, 也就是浏览器 - 编辑器 这一功能是没有的 (当然这是相对来说)只能在单一页面起作用如果我开两到3个不同分辨率的页面做响应式或手机端liveReload 就不美了。
三、Broswer-Sync https://browsersync.io/ 安装 npm install -g browser-sync 启动 静态网站 - 如果您只使用.html文件则需要使用服务器模式。 browser-sync start --server --files css/*.css 动态网站 - 如果您已经在运行PHP或类似的本地服务器则需要使用代理模式。 browser-sync start --proxy myproject.dev --files css/*.css 需要注意的是 对于指令对于命令中的 css/*.css 和 myproject.dev 要根据实际文件夹名称文件路径进行调整
优点 :
相较于以上2种工具, Broswer-Sync 的应用范围更广,使用者更多, 这就意味着你所可能遇到的麻烦越少liveReload 是浏览器的 F5, 而Broswer-Sync 则是只针对修改的文件进行视图同步无论你开多少页面只要内容修改页面内容都是随着变化响应式手机端调试等都是极好的。官方展示的优点如下
四、对比
