gulpの導入

yarnの導入

vccwには初期状態でnpmというパッケージマネージャがインストールされています。これをより便利に発展させたfacebook製のパッケージマネージャがyarnです。

• npmより動作速度が速い
• サーバサイド(node)はnpm、フロントエンドはbowerという使い分けが不要で、どちらのライブラリもyarnでインストールできる

といった特徴があります。

npm i -g yarn

上記のコマンドで、まずはyarnをグローバルにインストールしましょう。

gulpの導入

インストールしたyarnを利用して、gulpをインストールします。

vccwをインストールしたローカルのディレクトリに移動し、 さらに、そこからオリジナルで作成したいテーマのディレクトリに移動します。

yarn add gulp gulp-plumber gulp-sass browser-sync

として、gulp、gulpブラグイン各種、browser-syncをインストールしましょう。

しばらくするとインストールが完了します。

同じフォルダにpackage.jsonというファイルができているので、 その内容を編集します。

{
  "dependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.2.0",
    "gulp-sass": "^4.0.2"
  },
  "scripts":{
    "gulp" : "gulp"
  }
}

scripts以下の部分が追記部分になります。

こちらで、準備ができました。

yarn run gulp

というコマンドを入力し、No gulpfile found というエラーが表示されればここまでの設定はバッチリです。