Windows8（x64）のgulpでうまくいかなかったプラグインの対処法

前回の記事：[Windows8（x64）でgulpを初期設定する](http://qiita.com/taguchinbo/items/23bfa57fc7dda04f2625)

こちらの記事の通り、初期設定はうまくいくが、
プラグインの設定がいくつかうまくいかないものがあるので、
この記事で説明しようと思う。
※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
[公式サイト](https://www.ruby-lang.org/ja/)からダウンロードし、インストール。

#### gem
1.[公式サイト](http://rubygems.org/)からダウンロード。
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](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を使うにあたり、うまくいかないことなどありそうだが、
都度この記事を更新していくことによって解消していきたいと思う。