gulp インストール～基本設定の備忘録（windows）

node.jsは最新にしておこう（↓ windowsの場合ね）

nodist stable

node.jsのバージョン管理ツール「nodist」についてはこちらを参照。
⇒　node.js インストール備忘録（windows7）

npm も最新にしておこう（macの場合は sudoで実行すべし）

npm update -g npm

gulp のインストール

gulpをグローバルインストール

npm install -g gulp

プロジェクトのフォルダに移動し、node.jsモジュールを管理する package.jsonを作成

npm init

ここで再度 gulpをローカルインストール

npm install -D gulp

CLIとローカルバージョンが表示されればOK

> gulp -v
[xx:xx:xx] CLI version 3.8.11
[xx:xx:xx] Local version 3.8.11

ローカルインストールとグローバルインストール
ローカルインストールはそのプロジェクトのフォルダ内でのみ利用できる。グローバルインストールはそのマシン上のどこからでも利用できるようになる。
デフォルトはローカルインストールされるようになっており、グローバルインストールしたい場合は -g オプションを付けて実行する。
＜参考記事＞
gulpのアプローチ "なぜグローバルとローカルにインストールが必要なのか"

gulpfile.js の作成

package.jsonと同階層に gulpfile.jsを作成
“Hello World” を表示してみる

gulpfile.js

var gulp = require('gulp');

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

gulpコマンド実行　⇒　'default' に登録されたタスクが実行される

gulp

Hello World! が表示されればOK

パッケージのインストール

gulp-sass をインストールしてみる

npm install -D gulp-sass

gulpfile.js に scss → css のコンパイルタスクを登録

gulpfile.js

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

gulp.task('sass', function(){
    //scssディレクトリの指定
    gulp.src('./src/scss/*.scss')
    //コンパイル実行
    .pipe(sass({style : 'expanded'})) //出力形式の種類　#nested, compact, compressed, expanded.
    //出力先の指定
    .pipe(gulp.dest('./public/resources/css'));
});

試しに、/src/scss/ にサンプルのscssファイルを作成してタスク実行

gulp sass

指定したディレクトリ（/public/resources/css/）にcssファイルが出力できていたらOK。
その他スプライト用パッケージなど必要なものをインストール。

ファイルの監視

scssなど自動コンパイルされるよう gulpfile.jsに追記する

gulpfile.js

gulp.task('watch', function() {
    gulp.watch('./htdocs/resources/scss/*.scss', ['sass']);
});

こんな感じ

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var spritesmith = require("gulp.spritesmith");

//watch
gulp.task('watch', function() {
    gulp.watch('./htdocs/resources/scss/*.scss', ['sass']);
    gulp.watch('./htdocs/resources/_sprite/*', ['sprite']);
});

//scss
gulp.task('sass', function(){
    //scssディレクトリの指定
    gulp.src('./src/scss/*.scss')
    //コンパイル実行
    .pipe(sass({style : 'expanded'})) //出力形式の種類　#nested, compact, compressed, expanded.
    //出力先の指定
    .pipe(gulp.dest('./public/resources/css'));
});

//sprite
gulp.task('sprite', function () {
    var spriteData = gulp.src('./public/resources/_sprite/*')
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss'
        }));
    spriteData.img.pipe(gulp.dest('./public/resources/img'));
    spriteData.css.pipe(gulp.dest('./src/scss'));
});