【gulp】Webサイトコーディングを効率化する、必要最小限4つのプラグインの導入手順

150626_001

2016/11/15 gulp-compassをやめて、gulp-sassに変更しました。

gulpプラグインは多数公開されていますが、実務に必要なものはそう多くありません。
4つあるだけで作業時間をかなり短縮できますから、その導入手順を紹介します。

gulpの準備については、1つ前の記事をご覧ください。

目次

  1. 4つのプラグイン
  2. プラグインをインストール
  3. 作業用ディレクトリを構築
  4. gulpfile.js 作成
  5. gulp 起動
  6. gulp 停止
  7. プラグインのアンインストール方法

 

4つのプラグイン

Browsersync

ファイルを保存するとブラウザに反映するライブリロード系。
ブラウザ間の同期機能があり、現時点では最も便利。

gulpなしの単体でも使える。

 

gulp-sass

gulp-compassは謎エラーが多いので、gulp-sassを利用。

 

gulp-autoprefixer

コンパイル後のCSSに、現時点で必要な分だけのベンダープレフィックスを自動付与。
Compassのミックスインを使う必要がなくなる。

 

gulp-plumber

gulpは言語の文法エラーを察知すると強制停止するため、それを防止するためのもの。

 

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

コマンドプロンプトを立ち上げ、コーディング作業をするディレクトリへ移動。
続いて、下記コマンドを入力する。

まとめてインストールする場合

 

1つずつインストールする場合

package.jsonを確認すると、プラグインのバージョン情報等が追記された。

–save-dev とは?

開発用(案件用)のプラグインとして、ディレクトリごとにローカルインストールすること。

 

作業用ディレクトリを構築

ディレクトリ直下に「html」フォルダを作成し、その中に各フォルダを作成。
特別なことをする必要はない。

t258jb11u58l3j0p

 

gulpfile.js 作成

gulpfile.jsを手動で作成し、htmlフォルダの直上に配置。
先ほど「html」フォルダを生成したので、ここでもディレクトリは「html」となっている。

 

gulp 起動

コマンドプロンプトに戻り、gulp とコマンドを入力。

150626_006

 

gulp 停止

コマンドプロンプトで Ctrl + C を入力すると、「バッチ ジョブを終了しますか (Y/N)?」と聞いてくる。
Yキー を押してから Enter で、「keitahirai」のgulpが停止。

150626_010

 

プラグインのアンインストール方法

例)gulp-autoprefixer を削除したい場合。

プラグインをインストールしたディレクトリで、

と入力。

unbuild gulp-autoprefixer と表示されれば、アンインストールが完了。

150626_011

インストールした時のコードが、

なので、install の前に un を追加すればOK。

 

やり方は人それぞれ

150626_012

私のやり方が正解、というわけではありません。
公式サイトでプラグインを探したり、自分好みの方法を見つけると良いでしょう。

    • このエントリーをはてなブックマークに追加