ノンエンジニアでも簡単に出来るgulp導入

よろしければシェアお願いいたします

gulp導入その1
最近gulpに業務で触れる機会がありまして、実際に使用してみたところ作業効率が今までより格段に上がりました。
意外にとっつきやすかったので、フロントエンドエンジニアさんはぜひ導入してみてください。

gulpとは

gulpとは一言でお伝えすると「タスクを自動化してくれるもの」です。
タスクとは、画像やCSS・JavaScriptファイルの圧縮や結合などで、Sassのコンパイル&ウォッチも出来ます。

gulpと似たようなツールとして有名なものに「Grunt」というようなものがありますが、
Googleトレンドで調べてみたところ、最近ではgulpもGruntと同じぐらいの知名度となってきているようです。
gulpとGruntの知名度比較
(2016年10月現在)

ちなみに、ロゴの表記以外はすべて小文字の「gulp」が正しいようです。

gulpの導入

ではさっそくgulpを導入しましょう!
数ステップで完了までたどり着けます。

Node.jsの導入

まず、gulpを使用するためにはNode.jsの導入が必須となります。
Node.jsの公式サイトからダウンロードしましょう。
Node.jsのダウンロード
自分の環境にあったものをダウンロードし、実行してください。
インストールはデフォルトのまま最後まで進めて大丈夫です。

コマンドラインで下記を実行して、バージョン情報が表示されればインストールは終わりです。

※ここで導入したNode.jsのバージョンが古いと次のステップで躓くので公式で最新バージョンを確認しておいてください。

gulp.jsのインストール

Node.jsの導入が完了したら、gulpの導入を行います。
まず、コマンドラインで下記を実行してgulpをグローバルインストールします。

これをすることで、次の手順でローカルインストールするgulpを使用できるようになります。

確認コマンドを叩いてバージョン表示が出ればグローバルインストールは終わりです。

ローカルインストールを行う前に作業するディレクトリ(ソースが置いてある場所)に移動し、package.jsonを作成しておきます。
Node.jsに関するパッケージの管理が可能になります。詳しく知りたい方は、package.json 取扱説明書をご覧ください。

プロジェクトを非公開のままで良い場合は、一番最初のname以外はエンターで飛ばして構いません。
公開する場合は、ライセンスなど適時変更してください。
※後からでも変更可能です。

次にgulpのローカルインストールを行います。
移動したディレクトリの場所で下記を実行して下さい。

その後、正しくインストールされているか確認します。

バージョンが2行表示されていればgulpの導入は完了です。

先程作成したpackage.jsonを開いてみてください。
devDependenciesという項目に、gulpが追記されています。

既に業務などでプロジェクトが作成されている場合

package.jsonが既にある場合、
下記のコマンドを実行するだけで、devDependenciesに記述してあるもの全てがインストール出来ます。
※今回の場合はgulpのみがインストールされます。

コマンドひとつで開発に必要なツールが全てインストール出来てしまうので、わざわざ環境構築資料を作る必要がなくなります。

次の記事では実際にgulpのタスクを記述し、ベンタープレフィックスを自動付与します。
無駄なベンダープレフィックスを書くのはもう辞めよう。~gulp-Autoprefixerを使ってみた~

スポンサーリンク
広告1
広告1

よろしければシェアお願いいたします

フォローする

スポンサーリンク
広告1