livereload

sublime text plugin & chrome extends

刚接触 sublime text的时候,非常热衷于折腾插件,当时有一款 livereloadsublime插件,配合浏览器安装的livereload扩展,安装完在扩展程序界面允许这个扩展访问文件网址,就可以通过 file://文件的形式或者以server的形式同步查看页面源文件修改之后在浏览器的效果,不用去手动刷新。这样的方式对于写简单的页面非常有用,你可以省却手动启动一个server的步骤,因为livereloadsublime插件已经做了这件事。对于有超宽屏或者双显示器的页面重构人员,这相当令人激动的。

为了写这篇文章,特意再去体验一把,因为我现在用的是sublime text 3,以前那个插件是给sublime text 2用的,发现现在有一个devel version,说是给sublime text 3的,但我装上,建了一个测试页面,点击浏览器上的 livereload扩展按钮,却提示

Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running.

一开始以为是浏览器插件的问题,上网搜也没找到多少有用信息,只是看到这个浏览器插件评论页有不少人也在抱怨这个问题,到这里都会认为真的是这个扩展在新版浏览器中的问题了,但是强迫症的我还是把sublime text 2装上,验证到底是不是浏览器插件的问题。

最后的结论: 不是 livereload 浏览器扩展的问题,是sublime text 3插件的问题。

grunt-contrib-watch

我在接触了grunt之后,就放弃了上面那种使用方式。因为我会配置一套工作流来协助开发,livereload会是工作流中的一个task

以前有一个叫grunt-contrib-livereload的plugin,不过现在已经合并到grunt-contrib-watch中去了.关于怎样配置任务可以去看enabling-live-reload-in-your-html

这种方式的相比上面那种方式的优点是配合grunttask,监控更改的文件类型更多了,毕竟现在好多开发者在使用sasslesscoffeescript这些预处理语言或者各式各样的模板引擎。

但这种方式我们还是需要安装浏览器插件或者在页面里嵌入类似下面的livereload脚本

<script src="//localhost:35729/livereload.js"></script>

嵌入脚本的话上线的时候还得移除它,当然有工具可以在上线的时候处理掉这段脚本.但是这样终究显得有些不够全自动,呵呵。

browsersync

在工具的选择上我算是一个比较喜新厌旧的人了!所以用过gulp之后,我就不再写grunt了。gulp写起任务来比grunt优雅多了,而且现在gulp社区的繁荣,相比年初的时候,可以毫不犹豫的切换过来。

好了,吐槽完毕,进入正题,接下来要介绍的工具叫browsersync,会用gulpfile来做示例,但它是不依赖于gulp或者grunt的。

browsersync是一款多端同步刷新页面内容的工具,这能大大节省开发测试的时间。比如你在 chromeIE中打开同一个被 browsersync 监控的 URL,在 chrome 页面表单中输入的内容会被同步到 IE浏览器中,用户操作也是能同步的,很酷是吧.当然啦,像livereload的修改源文件刷新浏览器页面的功能也是有的。多端同步在开发响应式网站的时候相当有用,想想你电脑上有好几个浏览器,而且还手机端,pad端 上的浏览器,一个个打开去测多浪费时间呀!

browsersync通过启用一个server的方式,通过访问这个server的地址,就可以不用手动在页面上插入脚本或者去安装浏览器扩展了.有人可能会有疑惑,我已经有自己的server了,例如tomcat,那怎么办?别急,可以,把browsersyncserver设置成代理的server,这样访问browsersyncserver的时候,会把所有请求都转发到你自己的server上,棒!下面来看看我的配置吧!

// autoprefixer 浏览器支持版本
var browsersSupport = ['> 5%' 'last 2 versions' 'Firefox < 20'];

/**
 * 浏览器同步查看修改
 * http://www.browsersync.io/docs/gulp/
 */
gulp.task('browser-sync' function() {
  browserSync({
    /**
     * 二选一
     * 或者使用代理,或者启用一个静态资源服务
     */
    proxy: "localhost:8080"
    // server: {baseDir: "./static"}
  });
});

/**
 * 编译sass
 * https://github.com/dlmanning/gulp-sass
 * https://github.com/sindresorhus/gulp-autoprefixer
 * https://github.com/floridoo/gulp-sourcemaps
 */
gulp.task('sass' function(cb) {
  return gulp.src(path.src.scss)
    .pipe($.sourcemaps.init())
    .pipe($.sass({errLogToConsole: true outputStyle: 'nested'}))
    .pipe($.sourcemaps.write({includeContent: false})) // 可以通过下面的链接去了解为什么要加上这两句
    .pipe($.sourcemaps.init({loadMaps: true})) // https://github.com/floridoo/gulp-sourcemaps/issues/60
    .pipe($.autoprefixer({browsers: browsersSupport cascade: false}))
    .pipe($.sourcemaps.write('./maps'))
    .pipe(gulp.dest(path.dest.css))
    .pipe($.filter('**/*.css'))
    .pipe(browserSync.reload({stream:true}));
});


gulp.task('watchsass' ['sass' 'browser-sync'] function () {
  gulp.watch(path.src.scss ['sass']);
});

更多的配置,可以通过browsersync官网去了解,配置很简单,却是十分的实用,感谢作者开源这样的工具。

中文,中英字符两端对齐的方法

在表单布局中经常需要处理字符对齐的情况,本文探索如何实现中文字符,中英混合支付两端对齐的方法 Continue reading

event.target 和 event.currentTarget 的区别

Published on January 20, 2015

sass 中 @include 与 @extend 的区别

Published on January 19, 2015