====== Chapter 2：gulp を使ってみよう ====== ===== 2-1：gulp 用の gulpfile.js の作成 ===== いきなり敷居が高いので、不満が出るまでは誰かが作ったファイル(環境)を使うべし。\\ ということで、私の環境を置いときます。\\ [[http://ydlprog.no-ip.biz/ydlprog/download/software/gulp-anything-20170315.zip |gulp-anything-20170315.zip ]](README.md に使用方法を記述しています) .md(マークダウン)ファイルは、Chrome の拡張機能「Markdown Preview Plus」を入れ\\ ファイルの URL へのアクセスを許可するにチェックを入れると、簡単に見れるようになります。\\ {{:chapter_1:web_0009.png}} オプションで、Default CSS を Github にするとより見やすくなります。 {{:chapter_1:web_0010.png}} 適当なフォルダに、[[http://ydlprog.no-ip.biz/ydlprog/download/software/gulp-anything-20170315.zip|gulp-anything-20170315.zip ]] を解凍します。\\ 例：c:\project\sample c:\project\sample . ├── src │ └── 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 の中身を適当に書き換え保存します。\\ 自動的にブラウザがリロードされ最新状態に更新されます。
Hoge Hoge
 また、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 │ ├── .bin │ ├── ： │ ├── ： │ └── yeast ├── public │ └── index.html ├── src │ └── index.html ├── .babelrc ├── gulpfile.js ├── package.json ├── project.json └── README.md