gulp のインストール

nodist をインストール

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

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

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

C:\> nodist -v
0.7.1

git をインストール

なんかgitを要求されたので、インストールします。

※sourcetreeなどのgitクライアントツールをインストールしている人はgitインストールしなくてもいいんじゃね？

ってなりそうですが、必要なのでインストールしてね。

sourcetreeは自身のライブラリとしてgitを組み込んでいるため、外部から使うことができないので。

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

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

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

node.js をインストール

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

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

C:\> node -v

gulp.js をインストール

任意の作業ディレクトリを作成して作業してください。

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

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

C:\> cd Desktop\\sass\\

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

C:\> npm install -g gulp

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

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

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 ローカルインストール

C:\> npm install -D gulp

4.確認

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

gulpfile.jsを作成

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

var gulp = require('gulp');

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

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

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

gulp-sassはsassをコンパイルするやつ。

gulp-minify-cssはcssをminify化するやつです。

gulp-sass

C:\> npm install gulp-sass

gulp-minify-css

C:\> npm install gulp-minify-css

フォルダの作成

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

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

scssファイルの用意

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

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

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

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

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')); // 書き出すフォルダを指定
});

コンパイルを実行

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

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

確認

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

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

監視の設定

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

gulpfile.jsに追記します。

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...');
  });
});

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

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

これでおｋ

~/sass/style.scssを修正してみましょう。

- ~/sass/style.scss

dl {
  dt {
    border: 1px solid #ff8c60;
    &:hover {
      border: 5px solid #f00;
    }
  }
}
h1 {
  background: #0ff;
  &:hover {
    background: #00f;
  }
}

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

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

こんなログが出力されていればおｋ

そして、~/css/style.cssを確認してみてください。

~/css/style.css

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

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

WindowsでGulp.jsの環境構築