客户端安装 Sentry 进行错误/性能跟踪

Sentry 是一个日志平台,分为客户端和服务端,客户端(目前客户端有Python, PHP,C#, Ruby等多种语言)就嵌入在你的应用程序中间,程序出现异常就向服务端发送消息,服务端将消息记录到数据库中并提供一个web节目方便查看。Sentry由python编写,源码开放,性能卓越,易于扩展,目前著名的用户有Disqus, Path, mozilla, Pinterest等

  • 性能监控(trace)
  • 错误定位(source-map)
  • 性能监控
阅读更多

使用 BrowserSync 来实现内容变动之后的实时刷新

[ps]这个工具支持不同的开发环境, 支持不同的开发语种, 不限于前端, 也不限于后端, 实现原理是监听内容文件夹, 实现改动, 自动刷新, 例如 php, html, css 等等..
Browsersync 能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。

阅读更多

介绍 gulp.js 9 : 检查 Javascript 语法和 Scss 语法

原文链接: Introduction to Gulp.js 9: Checking the Syntax of SCSS and JavaScript
这是 Introduction to Gulp.js 的第九章. 今天我使用 Gulp.js 来自动的检查我的 Scss 和 JavaScript 文件中的语法错误和警告错误.
我打算给我的Scss 文件提示, 不是 css 文件. 因为给生成的 css 文件进行语法纠错一点意义都没有, 生活就是要做有意义的事. 但是可以 使用 gulp-csslint 来搞这个

阅读更多

介绍 gulp.js 1 : 介绍和安装

原文地址: Introduction to Gulp.js 1: Intro and Setup
我的网站自2014年一直运行在 Jekyll . 但是我一直不满意我的开发和构建过程, 我开始使用 Rake 任务和 Grunt.js 作为我的构建系统, 但是一部分的开发过程依然使用 Ruby, 我很大一部分使用 CompassJekyll Assets 来管理我的版本控制, 但是 Grunt.jsJekyll Asset Pipeline 一直不能很好地配合, 然后有了一个新的解决方案 Gulp.js.

阅读更多

介绍 gulp.js 10 : 生成 css 图片精灵

原文链接: Introduction to Gulp.js 10: Generating CSS Image Sprites
这是 Introduction to Gulp.js 的第十章, 今天我会使用 Gulp.js 来创建 css 图片精灵.
仅仅是为了确定大家都知道我在说什么: 一个 CSS 图片精灵是把一组单个图片文件放入到一个大文件中. 这种方式减少了对服务器的请求次数, 从而让服务器访问更快些. css 文件将为每一个图片定位一个正确的位置.
因为 SVG 和矢量字体的应用, CSS 图片精灵并不是使用的很频繁. 但是我仍然使用它们作为不兼容向量字体浏览器的一个折衷方案.
我需要使用 Gulp.js 的 Spritesmith 插件:

阅读更多

[转] ESLint 使用入门

原文地址:ESLint 使用入门
ESLint 是一个开源的JavaScript验证工具,相比JSLint,ESLint具有可配置性。其他跟JSLint 的不同之处:

  • ESLint 使用 Esprima 来进行 javascript 解析
  • ESLint 使用 AST 来修改代码模式
  • ESLint 是完全可插的,每个单个的规则都是一个插件,用户可以在运行时增加更多的插件

在团队协作中,为避免低级 Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。
在以前的项目中,我们选择 JSHint 和 JSCS 结合使用,WebStorm 等开发环境已经支持这些工具,使用起来很顺手。然而,最近使用 React JSX 语法时,却遇到了问题:JSHint 不支持 JSX 语法。虽然有 JSXHint 这样的 JSHint 衍生工具,但个人并不喜欢这样的实现方式:不是以插件的形式实现,而是重新重新包装了一个工具。Nicholas C. Zakas 也不喜欢,所以有了 ESLint
原来选择 JSHint 的时候,也对比过 ESLint,基于 ESLint 在速度上比 JSHint 要慢一些,最终使用了 JSHint。现在需要 JSX 支持了,才发现 ESLint 的设计理念更符合实际需求。

阅读更多

介绍 gulp.js 8 : 监听变动

原文地址: Watch for Changes
这是 Introduction to Gulp.js 的第八部分. 今天我会使用 Gulp.js 为很多文件设置监听任务.
你还记得开始时候设置的监听任务么? 我们仅仅使用了 BrowserSync 和开发服务器, 但是没有监听任何东西, 这个任务将会监听这些.
Watch 是 gulp api 的一部分. 他会监听文件的变化(增加/删除/修改), 这样会触发这个任务
gulp/config.js

阅读更多

[译 ing] Introduction to Gulp.js 11: Production Build, Server and Jekyll

原文链接: Introduction to Gulp.js 11: Production Build, Server and Jekyll
This is the 11th part of my series Introduction to Gulp.js. Today I will start writing the production build task, set up a server to view the production code and build the production site with Jekyll.
In development I used the default Gulp.js tasks to run the development server, building the assets and watching for changes. For production I will need another entry point.
I decided to name my task publish. Later I am able to get a production build with the command gulp publish.
gulp/tasks/publish.js

阅读更多

搭建一个可以写前端代码的无刷新框架[vue/less]

其实现在有更好的方案 : Laravel Mix, 如果需要学习可以参考此文档

github 地址: https://github.com/imvkmark/fe-refresh-demo

在开发过程中, 现在遇到了写一些 html 的例子来测试代码, 但是在做的过程中, 使用在线的 jsbin 等工具总不如本地的代码测试跟踪起来便利, 所以就想本地搭建一个服务器可以监听本地的文件并能够实时显示在浏览器中进行测试, 主要完成 html/css 的预览以及测试

我这里选用的技术栈是

阅读更多