ラック
Home > ブログ > 記事 > 2018年2月 > Local by Flywheelでgulpを動かせるかテスト

Local by Flywheelでgulpを動かせるかテスト

カテゴリ: ホームページ,開発環境

XAMPPのWordPressで自動リロードができなかったのでどうしようかと考えあぐねていたのですが、ふと自分のPCにLocal by Flywheelをインストールしていたことを思い出して、もしかして、と情報を探してみました。

導入

インストールはWindowsでも基本的にインストーラで「次へ」とやっていけば入るので導入は簡単です。

gulp

……え、プロキシ挟まないで行けるのです?行けるのならば楽なのですが……と思いつつ試してみました。

  1. Local by Flywheelでサイトを作成1
    Local by Flywheelでサイトを作成2
    Local by Flywheelでサイトを作成3
    Local by Flywheelでサイトを作成4
    Local by Flywheelでサイトを作成5
    まずはサクッとサイトを作り……。
  2. gitから静的サイト用のテンプレをダウンロードし、Local by Flywheelのサイトのルート(C:\Users\USERNAME\Local Sites\SITENAME\app\public)にコピペ
  3. .gitignoregulpfile.jsを編集して、テーマやURLのパス名を修正
  4. いつも通りnpm i -Dnpm run proinitで初期設定
  5. gulpfile.jsを編集
    
    var browserSync = require("browser-sync");
    //auto reload
    gulp.task("connect-sync", function() {
    	browserSync.init({
            proxy: "https://TESTSITE.EXAMPLE.COM/",
        });
    });
    
  6. gulp実行

すると……。

gulpでbrwser-syncして、きちんとサイトが見られたことを確認

できました!普通のWordPressサイトであればこれで良さそうです。もうちょっと調整してモノにしたいです。

タグ: javascript,サーバ環境・構築,gulp,仮想マシン,Node.js

 



関連する記事一覧