（悪）gulpのインストール(cjsxコンパイルタスクの作成・検証)

gulpのインストール＋cjxコンパイルのタスク作成

gulp + browserifyを改めて記事書きますので、以下の手順は非推奨

概要

• gulpのインストール
• gulpプラグインのインストール
• gulpfile.jsの作成
• gulpで実行するタスク作成
• 動作検証

手順

1. gulpをグローバルにインストール
2. プロジェクトフォルダ作成
3. npm init
4. gulpをローカルにインストール
5. プラグインのインストール
6. package.jsonの確認
7. gulpfile.jsの作成
8. cjsxファイル作成
9. タスクの動作検証
10. ファイル生成確認

やった感想

webpackを使ったりしてブラウザ毎の同期を取ったりすることも出来るらしいので今後やってみたいですね。 気になるのは、gulp-cjxというプラグインを使用するのは良いんですがReactのバージョンの指定とか出来ないんですかね。 初心者なのでよくわかってないな。 ローカルにnpmでReactを任意バージョンでインクルードしたら、そのバージョンに沿うようになったりしないのかな。 CoffeeScriptも同様に思う。

ログについては、続きを押下頂ければ

実際のログ

$ npm install -g gulp
$ gulp -v
$ mkdir develop/frontend/react/tutorial-coffee-gulp
$ cd develop/frontend/react/tutorial-coffee-gulp
$ npm init
$ npm install -D gulp gulp-util
$ npm install -D gulp-cjsx
$ less package.json
{
  "name": "tutorial-coffee-gulp",
  "version": "1.0.0",
  "description": "gulp sample using coffee-script",
  "main": "main.js",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp",
    "react"
  ],
  "author": "kuriya0909",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
        "gulp-util": "^3.0.6",
    "gulp-cjsx": "^3.0.0"
  }
}
$ pwd
/Users/kuriya0909/development/frontend/react/tutorial-coffee-gulp
$ vim gulpfile.js
$ less gulpfile.js

$ mkdir src
$ vim src/tutorial1.cjsx
$ less src/tutorial1.cjsx
# tutorial1.cjsx
CommentBox = React.createClass
    render: ->
          <div className="commentBox">
                Hello, Coffee world.
            </div>

window.onload = ->
  React.render(
    <CommentBox />,
      document.getElementById('content')
  );

$ gulp
[07:44:19] Using gulpfile ~/development/frontend/react/tutorial-coffee-gulp/gulpfile.js
[07:44:19] Starting 'default'...
gulp!
[07:44:19] Finished 'default' after 139 μs

$ gulp cjsx
[07:45:36] Using gulpfile ~/development/frontend/react/tutorial-coffee-gulp/gulpfile.js
[07:45:36] Starting 'cjsx'...
[07:45:36] Finished 'cjsx' after 9.95 ms

$ less ./public/tutorial1.js
var CommentBox;

CommentBox = React.createClass({
  render: function() {
    return React.createElement("div", {
      "className": "commentBox"
    }, "\t\t\tHello, Coffee world.");
  }
});

window.onload = function() {
  return React.render(React.createElement(CommentBox, null), document.getElementById('content'));
};