VCCWの開発環境(WordPressのテーマ・プラグイン開発環境をVagrantを使い簡単に構築する方法)が整っている環境でBrowserSyncを使えるようにする方法を紹介。VCCWの環境でBrowserSyncを使うために必要なものをインストール。Node.jsのインストールNode.jsをインストール。-vで確認し、バージョンが表示されればインストール済み。表示されない場合はHomebrewでインストール。nodeパスワードを聞かれるのでパソコンのパスワードを入力し、Node.jsのインストール完了。gulp.jsのインストールここから先はプロジェクト用にインストールしていくので、プロジェクトの最上位ディレクトリに移動する。~/vccwでvccwフォルダに移動。作られたパッケージモジュールを管理するためのツールnpmを使う。Node.jsをインストールすれば一緒に入っているのでnpmを個別にインストールする必要はない。タスク自動化のためのビルドツールの「gulp.js」をインストール。gulp「–save-dev」はプロジェクトごとにプラグインをインストールする。「vccw」フォルダに「node_modules」フォルダが作成され、その中にプラグインがインストールされていく。因みに「–save-dev」ではなく「-g」を使うとどこからでも使えるグローバルな環境にインストールすることができる。BrowserSyncBrowserSyncのインストール。browser-syncその他プラグインのインストールsassなどのコンパイルエラーが出た時にgulpが落ちるのを防ぐプラグイン「gulp-plumber」をインストール。gulp-plumberSassを使うための「gulp-sass」をインストール。gulp-sass作成されたCSSファイルを圧縮する「gulp-cssmin」をインストール。gulp-cssminファイル名をリネームするプラグイン「gulp-rename」をインストール。gulp-rename@mediaの記述をまとめてくれる「gulp-combine-media-queries」をインストール。gulp-combine-media-queriesgulp-combine-media-queries/index.jsの152目の以下の箇所がエラーになるのでコメントアウト。「gulpfile.js」は自動で作成されないので自分で作る必要がある。「node_modules」フォルダと同じ階層に作成する(今回の場合だと「vccw」フォルダ内に作成)。['bs-reload']);});「/path/to/src/css/」はscssが入っているフォルダまでのパス。「/path/to/css」は作成されたCSSを保存するフォルダまでのパス。「/path/to/wordpress/theme/theme_name/」はWordPressのテーマファイルまでのパスに変更する。“wordpress.local”」はVCCWで設定したドメインを入力。BrowserSyncを実行すると独自のサーバが立ち上がるが、こうすることでVCCWで立ち上がっているサーバ経由で実行することができる。「gulpfile.js」がある場所までターミナルで移動し、VCCWで作成したプロジェクトのサーバを立ち上げる。up同じ場所で「gulp」を実行。gulp自動でブラウザが「http://localhost:3000/」にアクセスしWordPressが表示される。後は「scss」ファイルやテーマの「php」ファイルを編集し保存したら表示されたブラウザ画面が自動で再読み込みして最新の状態になる。月50万稼げたら年収は600万で、普通の人以上の生活ができます。tab」でエディタに戻る、という動作をしなくなりました。1人で完結しているオールインワンブロガー。経験したり学んだ事を発信し続けていたらブログで生活できるようになりました。自分の能力(ちから)で生きていくを信念に、ストレス無く自分の人生を楽しむことをに全力を注いでいます。このブログの転載、引用については「転載、引用について」をご覧ください。SWT710」レビューオールバーズのスリッポンタイプレビュー【Allbirds】マーケティング脳を身につければ人生が好転する。