読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

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

f:id:sitk:20150526223205p:plain

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

第一弾もご参考にw
www.web-genba.com

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

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

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

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

http://nodejs.org/

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

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

$ node -v

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

【2】Gulpのインストール(グローバル環境)

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

$ npm install -g gulp

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

【3】package.jsonの生成

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

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

移動したら、

$ npm init

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

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

【4】Gulpのインストール(ローカル環境)

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

$ npm install gulp --save-dev

【5】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"]);
});

各種フォルダは、ご自身の環境に合わせて調整してください。

【6】gulpの実行

gulpfile.jsの設定ができたら、いよいよgulpの実行です。

コマンドは簡単!

$ gulp

たったこれだけ!

簡単ですね!

もっと便利にするには。。。

現状だとエラーが出ると監視が止まりますので、
プラグインを入れて監視を実行させます。

$ npm install gulp-plumber --save-dev

これで、完璧!

【7】コマンドを終了するには

さいごに。
コマンドを終了するためには、こちらをどうぞ。

ターミナルで、ショートカットキーを押して終了です。

ctrl + c

それでは、楽しいコーディングライフを!

脱にわかフロントエンドエンジニアを目指すなら、これは読んでおきましょう。

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

追伸:メルマガもやってます。

www.mag2.com

気ままに配信しておりますので、ブログと併せて、ぜひご登録を!
目指せWeb業界!就職・転職・起業なら、学校では教えてくれないWeb制作の現場