経験知ロゴ

Vagrant + VCCW の環境でBrowserSyncを使いWordPressのCSS開発環境を整える

BowserSync
Vagrant + VCCWの開発環境(WordPressのテーマ・プラグイン開発環境をVagrantを使い簡単に構築する方法)が整っている環境でBrowserSyncを使えるようにする方法を紹介。

各種インストール

Vagrant + VCCWの環境でBrowserSyncを使うために必要なものをインストール。

Node.jsのインストール

Node.jsをインストール。インストールされているかわからない場合は

$ node -v

で確認し、バージョンが表示されればインストール済み。表示されない場合はHomebrewでインストール。

$ sudo brew install node

パスワードを聞かれるのでパソコンのパスワードを入力し、Node.jsのインストール完了。

gulp.jsのインストール

ここから先はプロジェクト用にインストールしていくので、プロジェクトの最上位ディレクトリに移動する。僕の場合はVCCWのフォルダ構造をそのまま使っているので

$ cd ~/vccw

でvccwフォルダに移動。

Node で作られたパッケージモジュールを管理するためのツールnpmを使う。Node.jsをインストールすれば一緒に入っているのでnpmを個別にインストールする必要はない。
タスク自動化のためのビルドツールの「gulp.js」をインストール。

$ sudo npm install --save-dev gulp

「–save-dev」はプロジェクトごとにプラグインをインストールする。「vccw」フォルダに「node_modules」フォルダが作成され、その中にプラグインがインストールされていく。
node_modules

因みに「–save-dev」ではなく「-g」を使うとどこからでも使えるグローバルな環境にインストールすることができる。

BrowserSync

BrowserSyncのインストール。

$ sudo npm install --save-dev browser-sync

その他プラグインのインストール

sassなどのコンパイルエラーが出た時にgulpが落ちるのを防ぐプラグイン「gulp-plumber」をインストール。

$ sudo npm install --save-dev gulp-plumber

Sassを使うための「gulp-sass」をインストール。

$ sudo npm install --save-dev gulp-sass

作成されたCSSファイルを圧縮する「gulp-cssmin」をインストール。

$ sudo npm install --save-dev gulp-cssmin

ファイル名をリネームするプラグイン「gulp-rename」をインストール。

$ sudo npm install --save-dev gulp-rename

@mediaの記述をまとめてくれる「gulp-combine-media-queries」をインストール。

$ sudo npm install --save-dev gulp-combine-media-queries

gulp-combine-media-queries/index.jsの152目の以下の箇所がエラーになるのでコメントアウト。

// file.contents = new Buffer(cssJson);

gulpfile.jsの作成

「gulpfile.js」は自動で作成されないので自分で作る必要がある。「node_modules」フォルダと同じ階層に作成する(今回の場合だと「vccw」フォルダ内に作成)。

var gulp = require('gulp');
var sass = require('gulp-sass');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');
var cmq = require('gulp-combine-media-queries');

gulp.task('sass', function () {
    gulp.src('/path/to/src/css/*.scss')
        .pipe(sass())
        .pipe(cmq({log: false}))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('/path/to/css'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('browser-sync', function () {
    browserSync({
        proxy: "wordpress.local"
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch("/path/to/src/css/*.scss", ['sass']);


    gulp.watch("/path/to/wordpress/theme/theme_name/*.php", ['bs-reload']);
});

「/path/to/src/css/」はscssが入っているフォルダまでのパス。

「/path/to/css」は作成されたCSSを保存するフォルダまでのパス。

「/path/to/wordpress/theme/theme_name/」はWordPressのテーマファイルまでのパスに変更する。

「proxy: “wordpress.local”」はVCCWで設定したドメインを入力。
BrowserSyncを実行すると独自のサーバが立ち上がるが、こうすることでVCCWで立ち上がっているサーバ経由で実行することができる。

実行

「gulpfile.js」がある場所までターミナルで移動し、VCCWで作成したプロジェクトのサーバを立ち上げる。

$ vagrant up

同じ場所で「gulp」を実行。

$ gulp

自動でブラウザが「http://localhost:3000/」にアクセスしWordPressが表示される。

後は「scss」ファイルやテーマの「php」ファイルを編集し保存したら表示されたブラウザ画面が自動で再読み込みして最新の状態になる。

「gulp」を止めるにはターミナル画面で「control + c」を押すだけ。

週3日の副業で月50万

月50万稼げたら年収は600万で、普通の人以上の生活ができます。

それが週3日で稼げたら、残りの4日をどう過ごしますか?

  • 自分の趣味に全力を注ぐ
  • 家族との時間を増やし、子供の成長をしっかりと見守る
  • 毎週海外へ旅行へ行く
  • 新しいことに挑戦する
  • 何もせず、のんびり自由な時間を過ごす

週の半分以上が自分の好きなことに使えるのなら、人生は楽しい物になりますよね!

週2日の休みが増えるということは、

52週(1年) × 2日 = 104日

年間104日も増え、365日のうち208日も自分の時間に使えるのです!

更に、今30歳だとして、65歳まで働いたら、

104日 × 35年 = 3,640日

3,640日も変わってきます!!10年以上ですよ!10年!!

週2日の休みのために5日を無駄にする生活をいつまで続けますか?

週4日の自由たった3日で稼いで、自分のために自由に時間を使う生活をはじめましょう!

週3日で50万円稼げる案件は、業界最大級の案件を保有しているレバテックフリーランスで見つけられます。

1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう!

おわりに

CSSやPHPファイルが変更されると自動更新されるので、保存する度に「command + tab」でブラウザに移動し、「F5(あるいはcommand + R)」でブラウザの更新、「command + tab」でエディタに戻る、という動作をしなくなりました。

これメッチャ楽!!

▼役に立ったらシェアをお願いします