How to use “grunt-react” #2
Collaboration with grunt-browserify

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

Browserify enables CommonJS syntax where module importing is available.

This post is an additional version of the previous “How to use “grunt-react” Auto translation from jsx to js“. The “grunt-react” plugin can be more useful & effective with Browserify. And a plugin called “grunt-browserify” is the great contributor!

Install

If you did not install “grunt-react”, please refer to the previous post here.

Grunt configuration

A value in options “tranform: transform: [ require('grunt-react').browserify ]” imports grunt-react config.

JS

Only with grunt-react

For grunt-react config, please refer to the previous post.

Obviously, we need to read react.js prior to the above js file, otherwise the script fails to run.

With Browserify

Here employs react.js from bower (bower install react). You don’t need react.js line in html anymore!

Grunt: grunt-spritesmith for retina

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

A grunt plugin “grunt-spritesmith” is really helpful for creating sprite images.
In default, it does not support for retina displays, so we need to add extra mixins for it.
Referring to “CSSスプライトを生成する「grunt-spritesmith“, I tried it. BUT, it did not work on my console!

SCSS by spritesmith

I got some icons for a sprite image (icon1.png, icon2.png, icon3.png, icon4.png), and the plugin outputs the following scss file.

Extra mixins for retina

Problem

I thought the setting above worked without any problem, but the output css shows a weird result.

Oops! What is it? Do I have to cast the value in $sprite list ($icon1: 32px 70px -32px -70px 25px 22px 215px 188px ‘../img/sprite.gif’;)? NO, NO, you just upgrade Sass!!

Upgrade Sass & compass

Sass

OK!

compass

After the upgrade of Sass, compass got an error, so updated compass as well.

Result

Done!

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?