前回の記事：Windows8（x64）でgulpを初期設定する
こちらの記事の通り、初期設定はうまくいくが、
プラグインの設定がいくつかうまくいかないものがあるので、
この記事で説明しようと思う。
※gulp内に記載されているディレクトリは前回の記事の環境のものとする
gulp-compass
まだまだSassはCompassを使って書いている状況があるため、
Compassのパッケージをgulpにインストールし、コンパイルしようと思ったら
うまくいかなかった。
まずは基本設定
①「gulpfile.js」を編集する
以下の記述を追加する。
var compass = require('gulp-compass');
gulp.task('compass', function(){
gulp.src('develop/sass/**/*.scss').pipe(compass({
config_file: 'develop/config.rb',
comments: false,
css: 'develop/css',
sass: 'develop/sass/'
}));
});
②「Compass」プラグインのインストール
コマンドプロントを立ち上げて、
cd 任意のディレクトリ と打ち込み、任意のディレクトリに移動したら
以下のコマンドを入力し、Enterを押す。
npm install --save-dev gulp-compass
③動かしてみる
以下のコマンドを入力し、Enterを押す。
gulp compass
これでコンパイルされるはず
・・・
ですが、私の環境では全然動かなかった。
動かなかったときにやったこと
①PCに必要なものがインストールされているかを確認する
以下のコマンドを打って必要なものが入っているかどうかを確認する。
※任意のディレクトリではなく、コマンドプロントを開いてすぐに表示される
ディレクトリにて、このコマンドを打つこと。
ruby -v
gem –v
compass –v
②なければ、それぞれをインストールする。
Compassはgemを使用してインストールするので、まずはRubyとgemをインストールする。
Ruby
公式サイトからダウンロードし、インストール。
gem
1.公式サイトからダウンロード。
2.ダウンロードしてきたファイル（私の場合は「rubygems-update-2.6.10.gem」）を
コマンドプロントでインストールする必要があるので、ディレクトリ名が日本語名にならないフォルダに
移動させる。
※私の場合、「~/Downloads/rubygems-update-2.0.6.gem」とした。
3.コマンドプロントを立ち上げて、以下のコマンドを入力。
gem install ~/Downloads/rubygems-update-2.0.6.gem
4.以下のコマンドを打ち、バージョンが出たらOK。
gem –v
Compass
Rubyとgemがインストールされている前提で、
gem install compass
とコマンドを打つ。
これでインストールがうまくいかない場合、
gem source -a http://rubygems.org/
と打つ。私の場合、これでうまくいった。
※念のための補足として。
「Indiviual stylesheets must be in the sass directory」というバグが出た場合、
Gulpfile.jsのディレクトリがあってない。見直そう。
gulp-sass
Compassを使用せず、Sassのみのコンパイルを想定しインストールしてみたが、
これもうまくいかなかった。
まずは基本設定
①「gulpfile.js」を編集する
以下の記述を追加する。
var compass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('develop/sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('develop/css/'));
});
②「Sass」プラグインのインストール
コマンドプロントを立ち上げて、
cd 任意のディレクトリ と打ち込み、任意のディレクトリに移動したら
以下のコマンドを入力し、Enterを押す。
npm install --save-dev gulp-sass
③動かしてみる
以下のコマンドを入力し、Enterを押す。
gulp sass
これでコンパイルされるはず
・・・
ですが、私の環境ではこれも動かなかった。
動かなかったときにやったこと
①コマンドプロントのエラー内容を確認する
「gulp sass」を打ち込んだ際に出たエラー文言内に、以下のような記述があると思うので、探す。
Error: Missing binding 任意のディレクトリ/node_modules/node-sass/vendor/win32-x64-46/binding.node
この、「win32-x64-46 binding.node」という値を控えておく。この値は環境によって異なるので注意。
②必要なファイルをダウンロード
以下URLを開き、①で控えておいた値と同じものを探してダウンロードする。
https://github.com/sass/node-sass/releases
ダウンロードしたファイルが「win32-x64-46_binding.node」などとなっていた場合、
「binding.node」とリネームする
③ダウンロードしてきたものを設置する
②のファイルを①で出てきたディレクトリ
「任意のディレクトリ/node_modules/node-sass/vendor/win32-x64-46/binding.node」
に設置する。
この際、vendor配下に「win32-x64-46」というフォルダはないので、フォルダを作り、
そのフォルダの中に「binding.node」を配置する。
④改めて以下コマンドを打つ
一度コマンドプロントを再起動し、任意のディレクトリに移動後、
gulp sass
と打つ。私の場合、これでうまくいった。
gulp-scss-lintとgulp-sass-lint
これらもうまくいかなかった。
ただし、これらはいろいろ検証した結果ルールの設定はできるものの
Lintのルールが厳しいので、基本的に「gulp-csslint」で運用することにした。
※最終的にCSSが吐き出されるので、そのLintが１番重要であると判断した為
念のため、対処法は以下に記す。
バグ対処法
インストール時、
npm install gulp-scss-lint --save-dev
だけではなく、
gem install scss_lint
とすれば動くようになる。
gulp-connect-php
これはGulpでPHP環境を動かすことが出来るプラグインで、
使用方法としてはいろいろあるが、私の場合、Xamppと連携させるのに使用している。
具体的な使用方法は別記事にて紹介するとして、今回は、バグ対処法のみ記す。
バグ対処法
最新のバージョンのものでなく、
以下のバージョンのプラグインをインストールすることによって解決できた。
npm install gulp-connect-php@0.0.5
最後に
これからもGulpを使うにあたり、うまくいかないことなどありそうだが、
都度この記事を更新していくことによって解消していきたいと思う。