投稿日:2017年8月22日  更新日:

Gulp(ガルプ)で爆速コーディング!入れるべきプラグインは8つだけ!

フロントエンドエンジニアのマストツールGulp(ガルプ)。前記事ではGulpとはどういうものなのかを説明しました。Gulpを最大限に活用しコーディング労力軽減の恩恵を受けるにはやはりプラグインを適切に使わなければなりません。
現役フロントエンドエンジニアの自分が使用してみた感覚で、これがあれば大丈夫というプラグインを選びましたので是非参考にしてみてください。

インストールまでの流れは参考記事をご覧になってください。

[2018/1/16 →プラグインの種類を変更しました]

まずはGulpをインストールして環境を作ろう

何はともあれGulpの実行環境を作りましょう。

詳しいインストール方法は多くの文献が存在しますが、この記事がシンプルでわかりやすいので、参考にしてみてください。

npm から gulp インストールまでの手順

Gulpのインストールや起動はコマンドラインから全て行います。スタンドアロンのGUIアプリがあればわかりやすくていいのでしょうけど、現状はコマンドラインで全て行います。

前記事でも触れましたが、GulpはNode.jsをベースに動きますので、Node.jsをインストールしてください。

インストールはnpm(Node Package Manager)というコマンドから必要なものをネットワークインストールしていきます。

nmpの設定がおわりましたら、Gulp本体ののローカルインストール、グローバルインストールを行います。

ローカルとグローバルの違いは下記説明がわかりやすいです。

ローカルインストールとグローバルインストール
ローカルインストールはそのプロジェクトのフォルダ内でのみ利用できる。グローバルインストールはそのマシン上のどこからでも利用できるようになる。
デフォルトはローカルインストールされるようになっており、グローバルインストールしたい場合は -g オプションを付けて実行する。

【抜粋】gulp インストール~基本設定の備忘録

Gulpのインストールが終わったらいよいよプラグインのインストール、そしてキモとなるgulpfile.jsを作成します。

りょうま的おすすめGulpプラグイン

現在、私が選び抜いて実際使用しているプラグインは下記です。

  1. gulp-sass cssコンパイル
  2. gulp-csscomb cssプロパティ順序
  3. gulp-autoprefixer ベンダープレフィックス付与
  4. gulp-group-css-media-queries CSSメディアクエリー整理
  5. gulp-imageoptim 画像圧縮
  6. gulp-changed 変更のあったものを監視
  7. gulp-plumber watch中にエラー防止
  8. gulp-notify エラーを通知

 

以上8つになります。

①〜④までがcss関連、⑤が画像圧縮、⑥〜⑧が補助的なものです。

え?これだけ?と思うかもしれませんが、

はい、これだけで十分と判断しました。

 

私は若干ナマケモノなところがあり、Gulpは「gulp」コマンドを最初に実行して監視しておいたら、あとはGulpに関しては放置でコーディングをしています。

ですので、人によっては細かく「gulp ◯◯」とコマンドを使い分けていくかと思いますが、私はファイル保存時にGulpコマンドが走るようになっているので、上記のみがミニマムな”必要作業タスク”として設定しています。

あとはお好みであと2つくらいは足してもいいかもしれませんが、gulpコマンド処理が重くなりすぎてしまうところも懸念点ですので、実行マシンのスペックなんかと相談しながら入れてみてください。

CSSやJSをミニファイするコマンドですが、これは最後の最後で良いと思います。

絶賛作業中にCSSやJSファイルがミニファイされてしまうと、解読が困難でなにかと煩わしくなりますので、ミニファイ用のフォルダ(または別名保存)を別で用意しておいてもよいかもしれません。

ミニファイするプラグインは下記がおすすめです。

  1. gulp-uglify JS圧縮
  2. gulp-clean-css css圧縮

 

どっちみちこのコマンドを走らせるのは最後の最後ですかね。

次回は、Gulpのキモ、gulpfile.jsの作成方法、また案件別で同一のGulpを利用したい場合のディレクトリ配置のやり方をご紹介したいと思います。

 

関連
Gulp(ガルプ)で爆速コーディング!話題のGulpって何??

続きを見る

関連
Gulp(ガルプ)で爆速コーディング!入れるべきプラグインは8つだけ!

続きを見る

関連
Gulp(ガルプ)で爆速コーディング!複数の案件でGulpを使い回してみよう

続きを見る

 

Amazonチャージ

Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス6期目/大阪府北摂在住🏠 長野県諏訪市出身🎣学生時代に制作したサイトが評価され新卒で上場企業のWEBデザイナーとして就職。その後数社を渡り歩き、2013年にフリーランスとして独立。現在は主にフロントエンドエンジニアとしてお仕事しています。詳しいプロフィールはこちら

-Gulp / docker
-, , , , , ,

Copyright© ヤッテモータース , 2019 All Rights Reserved.