【保存版】Gulp初心者必見！導入に失敗しないための7つの手順

f:id:sitk:20150526223205p:plain

脱にわかフロントエンドエンジニア！シリーズの第二弾！！！
勝手にシリーズ化してますがｗ

第一弾もご参考にｗ
<a href="http://www.web-genba.com/entry/2015/05/23/093822">【フロントエンド向け】脱にわかフロントエンドエンジニア！Macでコーディング環境を整えたい人はこれだけは抑えておこう！ - 学校では教えてくれないWeb制作の現場</a>www.web-genba.com

ということで、今回はGulpのお話。
Mac環境を前提にお伝えしていきます。
gulp.js - the streaming build system

ぐぐれば、いろいろと情報がでてきますので、設定に詰まったら調べてみてください。

【１】Node.jsをインストール

まずは、公式サイトからインストーラをダウンロード。

http://nodejs.org/

簡単にインストールできます。

インストールが完了したら、バージョンの確認を行います。

$ node -v

バージョン番号が表示されればインストール完了です。

【２】Gulpのインストール（グローバル環境）

続いて、npmコマンドで、Gulpをグローバル環境にインストールします。

$ npm install -g gulp

ここで、エラーが出た場合はnode.jsのバージョンを確認してみてください。
たいていは、バージョンアップをしたら解決します。

【３】package.jsonの生成

インストールしたいディレクトリへ移動します。

$ cd 移動したいディレクトリ名へのパス

移動したら、

$ npm init

で、いろいろ項目が出てきますが、エンター押しまくってOK！

これで、無事にpackage.jsonが生成されます。

【４】Gulpのインストール（ローカル環境）

続いて、npmコマンドで、Gulpをローカル環境にインストールします。

$ npm install gulp --save-dev

【５】gulpfile.jsの作成

新規で、gulpfile.jsファイルを作成します。

ここでやりたいこととしては、

画像最適化
ブラウザ自動更新

とします。

まずは、gulpfile.jsファイルの先頭に

var gulp = require('gulp');

を記述します。

画像最適化

画像最適化をしたい場合は、下記のソースコードを追記します。

////////////////////////////////////////////////////////////
//画像最適化
////////////////////////////////////////////////////////////
var imagemin = require("gulp-imagemin");

 //ディレクトリ
var paths = {
  commonDir : 'cmn/img/',
  miniDir : 'cmn/img_min/'
}

gulp.task( 'imagemin', function(){
  var srcGlob = paths.commonDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
  var dstGlob = paths.miniDir;
  var imageminOptions = {
    optimizationLevel: 7
  };
 
  gulp.src( srcGlob )
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});

ブラウザ自動更新

ブラウザ自動更新をしたい場合は、下記のソースコードを追記します。

////////////////////////////////////////////////////////////
//ブラウザ自動更新
////////////////////////////////////////////////////////////
var browser = require("browser-sync");
var plumber = require('gulp-plumber');

gulp.task("server", function() {
    browser({
      notify: false,
      server: {
        baseDir: "./"
      }
    });
});

//HTMLが更新された時の処理
gulp.task('html', function() {
  return gulp.src('**/*.html')
    .pipe(browser.reload({stream:true}))
});
 
//CSSが更新された時の処理
gulp.task('css', function() {
  return gulp.src('cmn/css/*.css')
    .pipe(gulp.dest('cmn/css/'))
    .pipe(browser.reload({stream:true}))
});
 
//Javascriptが更新された時の処理
gulp.task("js", function() {
  gulp.src(["cmn/js/*.js"])
    .pipe(plumber())
    .pipe(gulp.dest("cmn/js/min"))
    .pipe(browser.reload({stream:true}))
});
 
 //監視
gulp.task("default",['server'], function() {
    gulp.watch(["cmn/js/*.js"],["js"]);
    gulp.watch("cmn/css/*.css",["css"]);
    gulp.watch(['**/*.html'],["html"]);
});