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