ローディング中

cloud9でgulpを使ってbrowser-syncしてみた(wordpress)

社内でcloud9を使いたいという要望があったので、cloud9で開発ができるか試してみました。

gulpのセットアップ手順が少し違ったのでメモしておきます。
既存プロジェクトでgulpが導入してある前提です。
gulpの導入についてはgulp記事一覧をご覧ください

cloud9の環境構築

  • アカウント作成(フリープラン)
  • ワークスペース作成
  • wordpressテンプレートを使ってwordpress立ちあげ
  • git cloneをしてwp-content内のフォルダを既存のものと同期

こんな画面になります

スクリーンショット 2016-06-09 13.35.22

gulpをセットアップする

  • こちらを参考に設定しました。公式サイト
  • 画面下のターミナルでテーマフォルダまで移動
  • そのままgulpを実行しても動かないので、npm install実行
  • npm i -g gulpを実行してgulpをグローバルにインストール

この段階でbrowser-syncが導入されているgulpを実行すると、

のような表示があるので、footer.phpのbodyタグを閉じるところに挿入します。
この状態でhttp://ワークスペース名-アカウント名.c9users.io/(WordPressが動いているところ)
にアクセスすると、Connected To BrowserSyncと表示されます。
あとはいつも通り作業に没頭しましょう。

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.