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

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

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

cloud9の環境構築

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

こんな画面になります

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

gulpをセットアップする

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

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

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

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →