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!

How to use “grunt-react”
Auto translation from jsx to js

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

React.js allows jsx scripting along with one of those translation tools like “JSXTransformer.js”.The “grunt-react” automates the conversion so that you only read a converted js file in your page.

Without grunt-react

HTML

JS

With grunt-react

We don’t need JSXTransformer.js anymore because grunt-react converts “jsx/main.jsx” (totally same contents as “main.js” above) to “js/main.js” of normal JS format. So only you need to do is to read react.js itself and the main.js.

HTML

Grunt config

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!