Chapter 2：gulp を使ってみよう

2-1：gulp 用の gulpfile.js の作成

いきなり敷居が高いので、不満が出るまでは誰かが作ったファイル(環境)を使うべし。
ということで、私の環境を置いときます。
gulp-anything-20170315.zip (README.md に使用方法を記述しています)

.md(マークダウン)ファイルは、Chrome の拡張機能「Markdown Preview Plus」を入れ
ファイルの URL へのアクセスを許可するにチェックを入れると、簡単に見れるようになります。

オプションで、Default CSS を Github にするとより見やすくなります。

適当なフォルダに、gulp-anything-20170315.zip を解凍します。
例：c:\project\sample

c:\project\sample
.
├── src<dir>
│  └── index.html
├── .babelrc
├── gulpfile.js
├── package.json
├── project.json
└── README.md

最初に gulp に必要な node モジュールをインストール。

$ cd /cygdrive/c/project/sample
$ npm install

2-2：リアルタイムプレビュー

以下のコマンドを実行すると、ブラウザが立ち上がり、BABEL-BUILDER と表示されます。

$ gulp -sw

index.html の中身を適当に書き換え保存します。
自動的にブラウザがリロードされ最新状態に更新されます。

	<body>
		<div id='root'>Hoge Hoge</div>
	</body>

また、gulp を起動したときに表示される、IP アドレスをスマホに打ち込めば、
PC とスマホを同時にリアルタイムプレビューできます。

[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.x.xx:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.x.xx:3001
 -------------------------------------

ディレクトリを見てみると、先程インストールした、node_modules(node モジュール)と
gulp で変換されたファイルが格納される、public フォルダが作成されています。

c:\project\sample
.
├── node_modules<dir>
│  ├── .bin<dir>
│  ├── ：
│  ├── ：
│  └── yeast<dir>
├── public<dir>
│  └── index.html
├── src<dir>
│  └── index.html
├── .babelrc
├── gulpfile.js
├── package.json
├── project.json
└── README.md

PC

ダウンロード

開発環境

リンク集

おすすめフリーソフト

CentOS Server

Raspberry Pi

Ubuntu Server

WEB

DokuWiki

iPhone

iPhoneサンプル

電子工作

個人的なメモ

Chapter 2：gulp を使ってみよう

2-1：gulp 用の gulpfile.js の作成

2-2：リアルタイムプレビュー