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

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');

gulp.task('sass', function () {
    gulp.src('/path/to/src/css/*.scss')
        .pipe(sass())
        .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」を押すだけ。

コードを更に理解する

WordPressをより自由に、思い通りに使用するにはPHPの知識が必要です。

PHPを学ぶには、Web上での情報や知識には限界があるので、人に教えてもらうのが一番の近道です。

そこでオススメなのが「CodeCamp」です。

マンツーマン指導なので、わからないことはすぐ聞けて、無料体験レッスンもあるのでどんな感じか試せます。


ITエンジニア専門スクールもオススメです。

スポンサーリンク

おわりに

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

これメッチャ楽!!


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク