sekaie engineers' blog

セカイエ株式会社が主催するエンジニア勉強会について

WindowsでGulpを動かしてみるぞい!

まいどどうもこんにちは。
セカイエの田中です。イントネーションにお気をつけください。

この記事は「セカイエ Advent Calendar 2015」の11日目の記事です。

さて、今回は、Windowsでgulp-sassを動かすまでを簡単に説明していきます。
(いまさら感がいなめないが、、、)

※所要時間:約15分

◆実行環境◆
OS:Windows7(64bit)

最終的にコマンドプロンプトで実行するのですが、
それまで各ソフトをインストールしていきます。


まず、必要になってくるのは、sassに必要な「Ruby」と gulpに必要な「Node.js」 ですね。

step1.WindowsRubyをインストール

RubyInstaller for WindowsのURLからダウンロードします。 http://rubyinstaller.org/downloads/

こちらの、Ruby 2.2.3(x64)をクリックします。

f:id:sekaie:20151211200950p:plain

ダウンロードできたら、クリックして実行します。

ポチポチ進んでいくと、この画面がでてくるのですが、

ここで、「Rubyの実行ファイルへの環境変数PATHを設定する」にチェックをつけましょう。 でないと、コマンドプロンプトで実行する際、

-bash: ruby: command not found

こんなん出ちゃうので、気をつけて。

はい。RubyはOK♪

ついでに、sassもいれちゃいましょう。 コマンドプロンプトを起動して

gem install sass

を入力。

コマンドプロンプトで確認。

sass -v
//バージョンが出ればOK
Sass 3.4.20 (Selective Steve)

(もし、だめだったらコマンドプロンプトを再起動してね)

step2.WindowsにNode.jsをインストール

Node.jsのURLからダウンロードします。 https://nodejs.org/en/

今回は、現在最新版の v5.2.0を選択します。

こちらはもうポチポチ進めていくだけ。

コマンドプロンプトで確認。

node -v
//バージョンが出ればOK
v5.2.0

(もし、だめだったらコマンドプロンプトを再起動してね)

はい。Node.js OK♪

step3.WindowsでGulpを動かす

では、コマンドプロンプトで実行していきましょう。

まず、ディレクトリをGulpを配置したい場所を作成後、移動します。

mkdir C:\work\gulp
cd C:\work\gulp

次に

npm init
・
・
Is this ok? (yes)

いろいろ聞かれてきますが、
とりあえず自分のディレクトリに戻ってくるまでエンターキーを押します。


じゃあ、そのフォルダーの中に package.json に作られます。

{
  "name": "gulpTest",
  "version": "1.0.0",
  "description": "description",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {}
}

内容はこちらに修正しておきましょう。

npm WARN install Refusing to install gulp as a dependency of itself

でないと、怒られる場合があります。

同じ、階層にREADME.mdのファイルを置いておけばなおよし。

Gulpをグローバルにインストールします。

npm install -g gulp

Gulpをインストールできました。

必要なモジュールをインストールしていきましょう。

npm install gulp --save-dev
npm install gulp-sass --save-dev


次に、
同じ階層に、新規ファイルのgulpfile.jsを用意して内容を以下にします。

var gulp = require('gulp');
var sass = require('gulp-sass');

// sass
gulp.task('sass', function () {
  gulp.src( 'sass/**/*.scss' )
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest( 'css' ));
});


同じ階層にsassフォルダーを作成し、その中にsample.scssを作成します。

内容

h1 {
    background: red;
    p {
        font-size: 120%;
    }
}


あとは、コマンドプロンプトで入力あるのみ!

gulp sass

cssのファイルが吐き出されたと思います。

C:\work\gulp\css\sample.css

h1 {
  background: red; }
  h1 p {
    font-size: 120%; }

ちゃんと gulp-sass 使えてますね。
よかった。よかった。


f:id:sekaie:20151211200854p:plain

最終的にこんなフォルダー構成になりました。


本来なら、Ruby と Node.js のバージョン管理は必須かと!

nodeのバージョン管理は、以下の記事を参考にしていただくとわかりやすかったです。

http://qiita.com/yokoh9/items/20d6bdc6030a3a861189

バージョン管理の勉強もせねば!!


なんか手順書みたいになっちゃいましたね。
ごめんなさい。

明日は増井さんのエンジニアの時間管理術です! 楽しみですね♪

ほな。

参考
http://h2ham.net/gulp-001
http://qiita.com/yokoh9/items/0a69dd5f8753c1ea54f5

師匠
@M_Ishikawa こと石川先生

先生 大西さん