你所选择的标签为: LiveReload

Gulp构建前端自动化工作流之:入门介绍及LiveReload的使用

Gulp构建前端自动化工作流之:入门介绍及LiveReload的使用

23

July

2015

其实这篇内容已躺在我的Evernote里许久,但一直搁置着,今天算是正式见光。

本文主要介绍如何使用Gulp.js,来帮助你构建一个自动化的前端开发流程。总结并归类自身使用中所遇到的方法、问题,便于新人上手和理解,同时也作为一份Gulp参考文档来使用,让你对Gulp有个更深入的了解。

最后,在正文开始前给新人提个醒:随着Gulp版本更新,API已发生了细小变化,目前网上很多文章,都是基于早期版本所写,当你查阅资料时一定要留意一下,否则会给你带来不少麻烦。

注:
本文所使用的工具版本为:Node.js(v0.10.21)、 Ruby(v2.2.1p85)、Gulp(v3.8.11)。
如有疑问欢迎在本文下方留言,或关注我的个人微信号:bluesdream_com
[ 查看全文... ]

Grunt插件之LiveReload_实现页面自动刷新,所见即所得编辑

Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑

20

November

2013

苦B的前端每次在制作和修改页面时,都有一个特定的三部曲:coding-save-F5。很多时候都希望自己一改东西,页面就能立刻显示,而现在LiveReload就能做到这点。

LiveReload会监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面。但如果你修改的是CSS或者图片,页面内容会即时更新,无需重新加载。这样我们不用每次修改文件后,都要去按下F5刷新页面,而是直接就能显示,有点类似所见即所得的编辑模式,特别适合使用双屏coding的人。另外同时结合Sublime text和Emmet LiveStyle,能提高不少开发效率。

LiveReload安装前的准备工作:

安装Node.jsGrunt,如果第一次接触,可以参考:Windows下安装Grunt的指南和相关说明,根据步骤操作,创建完package.json 和 Gruntfile.js这2个文件就行。

接下来,开始配置LiveReload所需要的环境和相关插件。这里所提供的有两种安装方案,根据自己需求进行选择。 [ 查看全文... ]

无觅相关文章插件,快速提升流量