WindowsでGulp.jsの環境構築

# gulp のインストール
## nodist をインストール

1.ここからダウンロード
[https://github.com/marcelklehr/nodist/releases/download/v0.7.1/NodistSetup-v0.7.1.exe](https://github.com/marcelklehr/nodist/releases/download/v0.7.1/NodistSetup-v0.7.1.exe)

2.環境設定でnodistのパスを追加する

3.コマンドプロンプトを起動して、確認する

```sh
C:\> nodist -v
0.7.1
```

## git をインストール

なんかgitを要求されたので、インストールします。  
※sourcetreeなどのgitクライアントツールをインストールしている人はgitインストールしなくてもいいんじゃね？  
ってなりそうですが、必要なのでインストールしてね。  
sourcetreeは自身のライブラリとしてgitを組み込んでいるため、外部から使うことができないので。


1.ここからダウンロード
[https://git-scm.com/download/win](https://git-scm.com/download/win)

2.コマンドプロンプトを起動して、確認する

```sh
C:\> git --version
git version 2.6.3.windows.1

```

## node.js をインストール

1.コマンドからインストール

```sh
C:\> nodist update
C:\> nodist stable
nodev5.0.0

C:\> node -v
```

## gulp.js をインストール

任意の作業ディレクトリを作成して作業してください。  
※迷った人はデスクトップに「sass」ってフォルダを作成してください。

1.作成したフォルダへコマンドプロンプトへ移動

```sh
C:\> cd Desktop\\sass\\
```

2.グローバルでインストール

```sh
C:\> npm install -g gulp
```

3.node プロジェクトを作成

適当にいろいろ入力を求められますが、下記のようにすればおｋ

```sh
C:\> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (sass) sass
version: (1.0.0) 0.0.1
description: test
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

{
  "name": "sass",
  "version": "0.0.1",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes
```

4.gulp ローカルインストール


```sh
C:\> npm install -D gulp
```

4.確認

```sh
C:\> gulp -v
[16:06:55] CLI version 3.9.0
[16:06:55] Local version 3.9.0
```

## gulpfile.jsを作成

設定ファイル（？）を作成します。

```javascript
var gulp = require('gulp');

gulp.task('default', function() {
  console.log("Hello World!");
});
```

ファイルを作成したらコマンドプロンプトから実行します。

```sh
C:\> gulp 
[20:05:13] Using gulpfile ~\Desktop\sass\gulpfile.js
[20:05:13] Starting 'default'...
Hello World!
[20:05:13] Finished 'default' after 1.08 ms
```

こんな感じで実行できればおｋ．


# sassをインストール

これは各自でお願いしますm(_ _ )m


# gulpでsassをコンパイルする

## 必要なモジュールをインストール gulp-sass & gulp-minify-css

<code>gulp-sass</code>はsassをコンパイルするやつ。  
<code>gulp-minify-css</code>はcssをminify化するやつです。

- gulp-sass

```sh
C:\> npm install gulp-sass

```

- gulp-minify-css

```sh
C:\> npm install gulp-minify-css
```


## フォルダの作成

* <code>sass</code>フォルダ：コンパイルするscssを保管する
* <code>css</code>フォルダ：コンパイル後に作成されるファイルを配置する


上記フォルダを作成してください


## scssファイルの用意

<code>sass</code>に<code>style.scss</code>というファイルを作成して、下記コードをコピペしてください。

```scss
dl {
  dt {
    border: 1px solid #ff8c60;
    &:hover {
      border: 5px solid #f00;
    }
  }
}
```

## gulpfile.jsで、コンパイルの設定を記述

<code>gulpfile.js</code>に下記コードをコピペしてください。

```javascript
var gulp       = require('gulp');
var sass       = require('gulp-sass');
var minifyCss  = require('gulp-minify-css');
var src        = '.';

gulp.task('sass' /* <= これが実行で指定する名前（？）になる */ , function() {
  gulp.src(src + '/sass/*scss') // コンパイルするファイルを指定
    .pipe(sass())               // sassでコンパイルする
    .pipe(minifyCss())          // minify化する
    .pipe(gulp.dest(src + '/css')); // 書き出すフォルダを指定
});
```

## コンパイルを実行


まずはコマンドプロンプトからコンパイルしてみます。


```sh
C:\> gulp sass
[20:13:15] Using gulpfile ~\Desktop\sass\gulpfile.js
[20:13:15] Starting 'sass'...
[20:13:15] Finished 'sass' after 25 ms
```

## 確認

<code>~/css/style.css</code>が作成されていて、下記コードが自動生成されていればおｋです。

```css
dl dt{border:1px solid #ff8c60}dl dt:hover{border:5px solid red}
```


## 監視の設定


自動でロードしてくれるように監視の設定を追加します。  
gulpfile.jsに追記します。


```javascript
var gulp       = require('gulp');
var sass       = require('gulp-sass');
var minifyCss  = require('gulp-minify-css');
var src        = '.';

gulp.task('sass', function() {
  gulp.src(src + '/sass/*scss')
    .pipe(sass())
    .pipe(minifyCss())
    .pipe(gulp.dest(src + '/css'));
});

// 監視の記述
gulp.task('watch', function() {
  var w_sass = gulp.watch(src + '/sass/*scss', ['sass']);
  w_sass.on('change', function(event){
    console.log('CSS File ' + event.path + ' was ' + event.type + ', running task sass...');
  });
});
```


一回コマンドプロンプトで実行します。

```sh
C:\> gulp watch
[20:18:13] Using gulpfile ~\Desktop\sass\gulpfile.js
[20:18:13] Starting 'watch'...
[20:18:13] Finished 'watch' after 21 ms
```


これでおｋ  
<code>~/sass/style.scss</code>を修正してみましょう。

- ~/sass/style.scss
- 
```scss
dl {
  dt {
    border: 1px solid #ff8c60;
    &:hover {
      border: 5px solid #f00;
    }
  }
}
h1 {
  background: #0ff;
  &:hover {
    background: #00f;
  }
}
```

保存後、コマンドプロンプトを確認してみると・・・


```sh
C:\> gulp watch
[20:18:13] Using gulpfile ~\Desktop\sass\gulpfile.js
[20:18:13] Starting 'watch'...
[20:18:13] Finished 'watch' after 21 ms
CSS File C:\Users\user_name\Desktop\sass\style.scss was changed, running task sass...
[20:18:55] Starting 'sass'...
[20:18:55] Finished 'sass' after 41 ms
```


こんなログが出力されていればおｋ  
そして、<code>~/css/style.css</code>を確認してみてください。


- ~/css/style.css

```css
dl dt{border:2px solid #ff8c60}dl dt:hover{border:5px solid red}h1{background:#0ff}h1:hover{background:#00f}
```


こうなっていればおｋ．お疲れ様でしたー。