Grunt: grunt-contrib-connect for remote livereload

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

A Grunt plugin “grunt-contrib-conenct” provides you live reloading along with your file modification.

Conventional configuration

Sometimes you need it available from remote console in case where we need to check on different browsers or share the page to other engineers. To realize it, you need a bit extra configuration because initially the plugin blocks remote http access.

Well, it accepts only localhost access.

Solution

Just add the hostname option as below.

Done!

Grunt: grunt-requirejs with almond.js

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

A grunt plugin “grunt-requirejs” offers almond.js which is compact version of require.js. (without async function)
If you unify all of js modules configured with require.js, asynchronous process by require.js is not necessary.
In that case, activate almond.js!

Install grunt-requirejs

Run this on the project folder.

Configuration

Directory

grunt-requirejs configuration

For parameter settings, please refer to here.

almond Activate almond or not
mainConfigFile File path for require configuration
baseUrl Base url for js files
name Main JavaScript file path without .js extention
* Relative path to “baseUrl”
out Output file path
optimize Optimising format
uglify | uglify2 | closure | closure.keepLines | none
preserveLicenseComments Whether keep licence comments or not

Grunt configuration divided into multiple files

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Grunt show its great power with bunch of plugins around.
And we setup them in a configuration file called, for example, “Gruntfile.js”.
A conventional set of configurations are like this.

My favorite set of plugins consists of “grunt-contrib-watch”, “grunt-contrib-jshint”, “grunt-contrib-uglify”, “grunt-contrib-compass”, “grunt-contrib-cssmin”, “grunt-contrib-livereload”, and so on.
Bunch of plugins ends up to less readability on Gruntfile.js..

Divide config settings to multiple files

We can configure those settings to multiple files like each configuration is stored in independent file and main Gruntfile.js is a main controller.

Directory settings

Here are config files in a folder called “grunt-tasks” which along with Gruntfile.js.

Configration file

For example, grunt-clean.js is set up like this.
The object “dirConfig” is declared in main Gruntfile.js so that it can be referable from any each of config files.

Gruntfile.js

A function “grunt.loadTasks” loads all of the config files in “grunt-tasks” folder.
As mentioned, “dirConfig” which specifies directories of development and production is declared here.

Maintainable, isn’t it?

Infinite window resize event on IE8

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

IE8 (not sure in IE7) fires window resize event over and over again after any element is resized in the window.
I got a solution from Stack Overflow.

However, I figured out it solves only when a page consists of static contents, not dynamically rendered ones.
In the dynamic case where the existing contents will be re-rendered by some trigger event like a contents reload function, we need to use $(document).width() or $(document).height() instead.

This is because of scroll bar of the window.
If a page has the scroll bar and the main contents will be re-rendered by clicking a button “Reload”, the scroll bar disappears on the event.
In that case, $(window).width() or $(window).height() is changed by the contents rendering, not by the actual window resizing.

Static contents

Dynamic contents