你所选择的标签为: Grunt Plugins

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所需要的环境和相关插件。这里所提供的有两种安装方案,根据自己需求进行选择。 [ 查看全文... ]

Windows下安装Grunt的指南和相关说明

13

November

2013

Grunt基于Node.js,其中 npm 是 Node.js 的包管理器,而Grunt和Grunt插件就通过 npm 安装并管理。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。

安装Node.js:
Node.js官网,点击INSTALL下载并安装,现在的Node.js会自动安装npm。

安装完成之后,打开命令行,进行后续的操作(开始->输入CMD 或 开始->所有程序 ->命令提示符)。

进入Node.js的安装目录(默认路径为"C:\Program Files\nodejs"):
cd \pro*\nod*
[ 查看全文... ]