#livereload

New item has been added on ThemeKeeper.com https://themekeeper.com/web-design/quick-tip-setup-local-previews-atom

Node.js

Een platform dat javascript applicaties kan draaien

Installatie nodejs installeer je d.m.v. de .pkg 

Installeren van package npm -g (naampackage)

Grunt

Installatie in terminal npm -g grunt-cli

Bower.js

Installatie in terminal npm install -g bower

Bower bower install in terminal Bower haalt alle scripts op van github, zo heb je overal de laatste versies van bestanden in .bowerrc kun je een map aangeven waar alle scripts opgeslagen kunnen worden. In dit geval is de directory asset/vendor {    "directory": "assets/vendor" } in bower.json kun je de dependencies aangeven, in dit geval gebruiken we jquery,fullpage.js,magnific-popup, modernizr, normalize.css {    "name": "test",    "version": "0.0.1",    "homepage": "http://",    "authors": [        "Lotte Bijl <[email protected]>"    ],    "dependencies": {        "jquery": null,        "fullpage.js": null,        "magnific-popup": null,        "modernizr": null,        "normalize.css": null    } } package.json package.json installeren in terminal sudo -s en npm install in terminal nu installeert hij alle modules die in package.json staan. Dit zorgt ervoor dat je alle modules van github af haalt en de laatste versie hebt. Deze zet hij in de map node_modules

Installeren Sass gem install sass in terminal gruntfile.js

In gruntfile.js beschrijf je alle grunt modules die uitgevoerd moeten worden op je bestanden en hoe deze opgeslagen moeten worden. Modules die hier worden gebruikt zijn:  sass (zet .scss om naar .css, cssmin (minified je css), uglify (minified je js), autoprefixer (zorgt voor dat alle prefixes worden toegevoegd aan je css) modernizr (zorgt dat je classes zoals .IE8 .IE9 kunt gebruiken om css te schrijven voor specifieke (oude) browsers svgstore (maakt een spritesheet van al je svg bestanden watch (kijkt of je bestanden hebt aangepast en zorgt ervoor dat de modules worden uitgevoerd) De uitkomsten hiervan zet hij in de map assets en externe scripts in assets/vendor registerTask , hiermee kun je taakpakketten aanmaken zoals ‘dev’ of ‘build’ of ‘svg’ . Hierin zet je alle modules die je wilt uitvoeren. deze registered task kun je in je terminal uitvoeren d.m.v. grunt dev Plugin livereload chrome plugin die via de watch module kan zien of er aanpassingen gedaan zijn in de code en gelijk de pagina refreshed. Hierdoor kun je je webbrowser in een 2e scherm zetten en realtime de aanpassingen daarop zien zonder CTRL+R op het toetsenbord uit te voeren.

Sublime TextにLiveReloadというパッケージを入れた状態で grunt-contrib-watchを実行すると下記のようなエラーが出ます。

Running "watch" task Waiting... Fatal error: Port 35729 is already in use by another process.

調べたところ、LiveReloadパッケージとGruntで使用しているポート番号が同じために衝突を起こしているのが問題みたいです。 解決方法は以下の3つが挙げられます。

LiveReloadを削除する

LiveReloadを無効化する

grunt-contrib-watchで使用するポート番号を変更する

それぞれの詳細は次で説明いたします。 因みに今回の環境は以下通りです。

エラーが起こった環境

Mac: OSX v10.9.4

Sublime Text: v3

grunt: v0.4.4

grunt-contrib-watch: 0.6.1

1. LiveReloadを削除する

Package Controlのコマンドを使って削除します。

Package Control: Remove Package を選択します。

パッケージのリストが表示されますので、LiveReloadを選択します。

2. LiveReloadを無効化する

削除するのはちょっと...もしかしたら使うかもだし...というかたはこの方法がいいんじゃないでしょうか。

Package Control: Disable Package を選択します。

パッケージのリストが表示されますので、LiveReloadを選択します。

3. grunt-contrib-watchで使用するポート番号を変更する

grunt-contrib-watchのページにある通り、 Gruntfile.js内に「options.livereload」を指定します。 追加すると、下記のような感じになります。

watc: { css: { files: '**/*.sass', tasks: ['sass'], options: { livereload: 1337 } } }

「true」または「1337」を指定しなさいと書いていたのですが、「true」だと相変わらずエラーが出たので数値を指定するのが良さそうです。

Complete guide to setup Sublime Text 2 as a best MarkDown Editor.

Sublime Text is one of a very light-weight, feature heavy, extensible code editor.

The true power of Sublime Text come from

Package Control provide by wbond,

Not remembering a lot of keystrokes. Only crtl+shift+p opens up the command palette where we can just type what we want.

Multiple cursor, you can highlight on a word and if…

Вы наверное уже устали каждый раз перезапускать свой маленький nodejs app каждый раз после внесения изменений в файлы. Поэтому ставьте скорее nodemon

Это простой и легкий плагин, который перезапустит ваш app сразу после того как вы внесете изменение в файлы проекта. 

Livereload is very cool feature. It automatically watch file changes and notify to browser to update the page. So, you don't need to refresh your page whenever update happens.

I can summarize it with two components;

Server-side watcher and notifier This can be complete with 1) livereload server($10) 2) or, your own server watch and notify to browser using websocket

Client-side message consumer This can be complete with 1) livereload browser extension(or plugin) 2) or, your own javascript to consume messages

As a programmer, I wanted to complete this feature with 2) and 2) both using my own script.

After two days of work, I was very close to rollout my version of livereload. However I figured out I can achieve this feature without any of my code, which means no maintenance.

The best programming is, no programing

To do so, you need to install the following node moduels

$ npm install grunt-contrib-watch grunt-contrib-connect connect-livereload --save-dev

grunt-contrib-watch is to monitor file changes and notify those to browsers using websocket with port 35729.

grunt-contrib-connect is to serve your files through http. You can also inject your own middleware

connect-livereload is the middleware used by grunt-contrib-connect to inject(add your your own script) to every single page.

The following is my gruntfile.js

module.exports = function (grunt) { // Load Grunt tasks declared in the package.json file require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); grunt.initConfig({ connect: { all : { options: { port: 9000, middleware: function(connect, options) { return [ require('connect-livereload')({ src: "//rawgithub.com/allenhwkim/util/master/livereload.js" }), connect.static('examples'), //http server base directory connect.directory('examples') //allow directory browsing ]; } } } }, watch: { all: { files: ['app/**/*', 'examples/*'], options: { livereload: true // starts livereload server at port 35729 } } } }); grunt.registerTask('server', ['connect', 'watch']); };

It uses my own livereload.js file using websocket client. I have tried with the existing livereload.js with no luck, and I don't need all the features provided from that anyway.

This is the code, you can find at https://github.com/allenhwkim/util/blob/master/livereload.js

/** * The following code will be injected every single page served by grunt-contrib-connect */ (function() { var ws = new WebSocket("ws://localhost:35729"); ws.onmessage = function(msg) { console.log('received message', msg); if ((JSON.parse(msg.data)).command == "reload") { window.location.reload(); } }; })();

LiveReload 很有名，就算沒用過應該也都聽過，mac 上有關方出的工具可用，不過我不是 mac 使用者阿...

雖然 Github 可以找到許多用不同語言寫的 LiveReload Server，但好像幾乎都不是很符合我目前的需求，所以就自己快速的寫了一個，我的需求如下：

簡單操作

可搭配 stylus, sass 服用，不須一個一個 watch

Github：another-livereload

Demo