gulpでの概要、設定、コマンド

Gulpとは

• 概要　フロントエンドの自動化

Gulpのインストール

gulp.jsはnode.jsのパッケージの一つとして適用されるので、gulp.jsをインストールする前にnode.jsもインストールする必要があります。

nodeのバージョン管理ツール

node.jsはバージョンアップが早く、バージョンが上がるたびにいちいち入れなおすのは大変です。
そこでバージョン管理ツールを使います。今回はnodistをいれてみました。

引用：node.jsをインストールしてみた（Windows） ｜ Tips Note
引用：marcelklehr/nodist: Natural node.js and io.js version manager for windows.

最新の安定版node.jsをインストール

nodist stable

npm も最新にしておこう

npm update -g npm

gulp のグローバルとローカルインストール

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

npm init

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

npm install -g gulp

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

npm install -D gulp

グローバルとローカルににインストールされているか確認

> gulp -v

引用：これから始める人のためのgulp入門 - satoyan419.com

gulpでwatchするには

gulp watch

gulpfile.js

var gulp = require('gulp');
//gulpのプラグインを読み込み
var sass = require('gulp-sass');
//gulp-sassのプラグインを読み込み


gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss') //タスクで処理するソースの指定
    .pipe(sass()) //処理させるモジュールを指定
    .pipe(gulp.dest('./prod/css')); //保存先を指定
});

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

gulp.task('default', ['sass']);

gulp.task()

上記の関数内にSassの処理を書きます。処理はgulp/API.md at master · gulpjs/gulp · GitHubを使って、Stream Node.js v0.11.11 Manual & Documentationをつくり、

pipe()

でstereamから受け取ったファイルのパス名パターン（globs）を処理します。最後にgulp/API.md at master · gulpjs/gulp · GitHubで宛先（保存先）を指定します。

引用：これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる | Webデザイン、フロントエンド系の技術に関する備忘録 - whiskers
引用：これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する | Webデザイン、フロントエンド系の技術に関する備忘録 - whiskers