Edited at

gulp インストール~基本設定の備忘録(windows)

More than 3 years have passed since last update.

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