Gulpを導入してみる

  • 11
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

仕事で初めて使ってみて、便利だったので導入方法を書いてみます。
ちなみにQiitaも初書き。

Gulpとは

Node.js製タスクランナー

  • Sassのコンパイル
  • ブラウザのリロード
  • HTML、CSS、JavaScriptの最適化
  • 画像の最適化
  • ローカルWebサーバー立ち上げ

などの作業をタスクに登録すると、
ファイルの更新タイミング等でタスクを自動実行してくれます。

gruntと似たものらしい(私はgruntを使った事がないですが)


メリット

  • 設定ファイル(gulpfile.js)がGruntより記述しやすい
  • Gruntより速い
  • Gruntより後発で新しい感

デメリット

  • 複雑なことは敷居がやや高め、javascript知識が多少は必要
  • ドキュメントが少ない(最近は増えてきた?

インストール手順

まず前提条件でNode.jsをインストールしておきます。

gulpをインストール

$ npm install -g gulp
$ gulp -v

エラーが出る場合sudoをつけて実行します。
バージョン情報が見れれば完了。


ローカルインストール

プロジェクト毎にインストールします。

ローカル用は1つのプロジェクト(フォルダ)に毎回入れます。

$ mkdir dev_gulp
$ cd dev_gulp
$ npm init

プロジェクトのフォルダを作成し、npm init を実行すると項目の入力を要求されます。

使うだけならとりあえずENTERで進めます。

入力が完了すると、package.json ファイルができます。

$ npm install --save-dev gulp

--save-devをつけることによって、開発用のローカルインストールになります。

package.jsonと同じ階層に、gulpfile.jsを作成します。

$ touch gulpfile.js

あとはプラグインをインストールして、gulpfile.jsにタスクを書いていきます。

プラグインをインストール

ここではsassのコンパイルプラグインを入れて、gulpでsassコンパイルをしてみます。

フォルダ構成
gullpfile.jsの同階層にappフォルダ、その配下を作成

gulpfile.js
app  
├index.html  
├css  
└sass  
 └common.scss  

scssファイルを作成
common.scss

h1{
  font-size: 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #ccc;
}
p{
  font-size: 12px;
  padding: 0;
}

gulp−sassをインストール

$ npm install --save-dev gulp-sass

インストール完了し、nodemodulesフォルダ配下にgulp−sassフォルダができたら、gulpfile.jsにタスクを書いていきます。

gulpfile.js

//gulp
var gulp = require('gulp');
//gulp-sass
var sass = require('gulp-sass');

//SASSビルドタスク
gulp.task('sass', function(){
    //scssディレクトリの指定
    gulp.src('app/sass/*.scss')

    //.pipeで処理実行
    //出力形式の種類 #nested, compact, compressed, expanded.
    .pipe(sass({style : 'expanded'})) 

    //出力先(gulp.dest)の指定
    .pipe(gulp.dest('app/css'));
});

’sass’という名前のsassコンパイルを行うタスクを作りました。
gulp sass コマンドで実行してみます。

$ gulp sass
〜
[16:52:21] Starting 'sass'...
[16:52:21] Finished 'sass' after 9.66 ms

上記のようにFinishedと出れば無事完了。
cssフォルダ内にコンパイルされたcssが吐き出されます。

その他のプラグイン

  • gulp-autoprefixer cssのベンダープレフィックスを自動付与
  • gulp-webserver ローカルwebサーバーを起動
  • gulp-plumber gulp watch中にエラーが発生してもgulpを終了させない
  • browser-sync ブラウザ同期、スマホでも開発環境のチェック可能になる
  • gulp-minify-css cssをミニファイしてくれる
  • gulp-watch 監視タスクより後に作成したファイルも監視できる

環境を配布・共有

開発者それぞれが環境を用意したのでは非常に手間ですので、ここまでにやった設定を配布・共有してみます。

やりかたは簡単でgulpfile.js、package.jsonの2つを共有するだけです。

環境構築したいPCで、同じようにフォルダを設置して以下を実行するだけ。
(node.js、gulpのインストールは行っておく)

$ npm install

これはプラグインを最初にインストールした時に、package.jsonにプラグイン情報が残るからです。

  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4"
  }

こんな風に。この情報から自動で必要なものがインストールされます。

gulpは個人的にも利用していきたいので、
今後もプラグインについて書いていく予定。