利用less监视模式实时预览样式刷新浏览器

【前言】此处介绍的方法只是我个人的用法,相信大家有更好更简洁的方式。

上次写到利用LiveReload解放F5。而且LiveReload可以编辑sass/less/stylus。但是可惜发现LiveReload在编译的时候不能抛错,这就很麻烦了,少了个标点less编译就不过,查找起来太麻烦。

我目前的解决方法:

利用Less自带的客户端开发模式(development)。

在开发的时候less的编译还是利用客户端浏览器,即

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="js/less-1.7.3.min.js" type="text/javascript"></script>

less自带监视模式,开启方式是在

<script src="js/less-1.7.3.min.js" type="text/javascript"></script>

的后面加入:

<script>less.watch();</script>

 

这样的话,less就能实时监视变化并改变样式,而且可以抛错。

 

还有一种方法

是利用Koala       这个软件,先提一下,这个软件是国内腾讯一个工程师开发的,是less官方推荐的GUI之一,这个软件功能基本功能和LiveReload差不多,也是监控文件夹的改变。但是扩展功能和设置项更加强大,内置了编译器可以抛错。大家可以关注下,在持续开发中。

但是这个软件不能实时刷新浏览器。本质上是个编译合并压缩工具,希望它后续能增加刷新功能。

利用less监视模式实时预览样式刷新浏览器

时间: 2024-10-16 13:38:21

利用less监视模式实时预览样式刷新浏览器的相关文章

Android中实时预览UI和编写UI的各种技巧

一.啰嗦 之前有读者反馈说,你搞这个所谓的最佳实践,每篇文章最后就给了一个库,感觉不是很高大上.其实,我在写这个系列之初就有想过这个问题.我的目的是:给出最实用的库来帮助我们开发,并且尽可能地说明这个库是如何编写的,希望让初创公司的程序员少写点给后人留坑的代码(想必大家对此深有体会).我之前给出的库都是很简单基础的,基本是一看就懂(但足够精妙),如果以后的文章涉及到了复杂的库,我会专门附加一篇库的讲解文.如果一个库的原理你知道,此外这个库很容易扩展和维护,而且它还用到了很多最佳实践的经验,你为什

UI实时预览最佳实践(转)

UI实时预览最佳实践 概要:Android中实时预览UI和编写UI的各种技巧.本文的例子都可以在结尾处的示例代码中看到并下载.如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以提交pull request.本文的代码主要是基于作者的实际经验编写的,如果你有其他的技巧和方法也可以参与进来一起完善此文. 文章固定连接:https://github.com/tianzhijiexian/Android-Best-Practices/blob/master/2015.9/ui/u

Atom编辑器折腾记_(11)编辑器实时预览HTML页面(插件:Atom HTML Preview)

为何寻找 每次预览HTML页面,都需要打开各种浏览器;哪怕不是调试,只是为了查看下效果; 切换来切换去,各种刷新,感觉有些浪费时间;以前用过DW的实时预览,感觉这个功能很赞; 又踏上了atom插件仓库慢慢寻找之路-.. 插件:atom-html-preview 官方描述:A live preview tool for Atom Editor. 简言之:Atom编辑器内实时预览的工具 获取方式 通过命令行安装 apm install atom-html-preview 通过编辑器内部的instal

用 grunt-contrib-connect 构建实时预览开发环境 实时刷新

本文基本是参照着 用Grunt与livereload构建实时预览的开发环境 实操了一遍,直接实现能实时预览文件列表,内容页面.不用刷新页面了,这比以前开发网页程序都简单. 这里要用到的 Grunt 插件有 grunt-contrib-connect , 用来充当一个静态文件服务器,本身集成了 livereload 功能 grunt-contrib-watch , 监视文件的改变,然后执行指定任务,这里用来刷新  grunt serve 打开的页面 以下是个辅助的插件 load-grunt-tas

一个支持实时预览的在线 Markdown 编辑器 - Markdoc

最近组内需要为一些项目和系统写文档,发表在公司内的文档平台上,这个平台并不支持markdown,所以打算做一个在线markdown编辑器,支持实时预览,并且可以很容易的迁移发表到公司文档平台上,所以就有了这个 Markdoc. 在线地址:http://weareoutman.github.io/markdoc/ 截图: 使用 左侧写 markdown 右侧实时预览 两侧滚动关联 自动内容记忆,下次打开时自动恢复内容 可下载为 markdown, doc, html 鼠标单击预览区,ctrl+A,

Linux下markdown编辑软件 — retext 支持实时预览,存为pdf、html、ODT等

本文由Suzzz原创,发布于 http://www.cnblogs.com/Suzzz/p/4129368.html,转载请保留此声明 ReText是一个linux下的markdown和reStructedText的编辑器,支持实时预览.输出为pdf.html.ODT等功能. 直接上效果图 查看生成的 html 代码

ubuntu vim markdown 实时预览

vim-instant-markdown插件 该插件支持vim编辑markdown文件时实时预览,不需要手动做任何事情! 使用vim打开一个xxx.md文件,浏览器会自动打开一个预览网页,在编辑这个文件的过程中,浏览器会自动更新,并不用保存该文档. 安装vim-instant-markdown 1.安装node.js curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -sudo apt-get install -y node

RunJS个人使用推荐(好用的JS、css实时预览、编辑、管理等功能)

RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自动完成等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/

整合VIM和Graphviz,并且使用本办法实现实时预览

在编程或是整理知识的时候一直苦于没有一款可以帮助理清思路的工具. 在网上苦寻良久,终于找到了一款可心可意的小软件 -- Graphviz. 折腾了一番,终于可以凑合着用了. 现将折腾的成果记录于此以作备忘,当然如果能够抛砖引玉那就再好不过了. 因为本人主要使用 Windows 以下将用 Windows 环境为例进行介绍. First 于此处下载需要的版本:http://www.graphviz.org/Download..php 将下载好的 msi 文件或 zip 文件安装或解压,记下安装路径.