ノンエンジニアのための初めてのGulp

5170 ワード
gulp Node.js Node.js テキストリンク

はじめに

この記事はGulpをまずは使ってみたい！というレベルの人向けの記事です。
Gulpの設定を自分で作りたい方は対象外となりますので、ご了承ください。

※node.jsのインストール方法など、もっと良いやり方はありますが、プログラムを書いたりターミナルを触ることに慣れていない人向けなので、最低限のやり方でご紹介させて頂きます。

Gulpを触ってみよう！

使えるようにする準備

1. node.jsをインストール。

node.jsは https://nodejs.org/ja/ からインストーラーをダウンロードしします。
バージョンが2つありますので、お好きな方を選択してください。

　※私は右側の最新版を使用しています。

ダウンロードが完了したら、インストーラーを起動し、画面の案内に沿ってインストールします。
（特に設定を変更する必要はございません。）

2. node.js、npmがインストールされたことを確認

Macならターミナル/Windowsならコマンドプロンプトを起動し、下記コマンドを入力します。
これらコマンドは、それぞれのバージョンを確認するコマンドです。

  • node.jsの確認方法
command
node -v
  • npmの確認方法
command
npm -v

成功すると、このようにバージョンが表示されます。

3.gulpをグローバルにインストールする

下記コマンドをターミナルに入力します。

command
npm install -g gulp

※もしエラーになった場合は、管理者権限で実行してみてください。

command
sudo npm install -g gulp

4.https://github.com/aki0923f/my_template をダウンロードして任意のディレクトリに格納

私の方でGulpがすぐに使えるファイルをご用意いたしました。
こちらをダウンロードし、任意のフォルダに格納してください。
ここでは例として、Desktopに置きます。

ディレクトリ構造
/Users/aki-f/Desktop/my_template-master/

5. ターミナル（コマンドプロンプト）でダウンロードしたディレクトリに移動し、必要なパッケージをインストールする。

Macならターミナル/Windowsならコマンドプロンプトを起動し、下記のように4.でダウンロードしたフォルダに移動します。

command
cd /Users/aki-f/Desktop/my_template-master/

その後、下記コマンドを入力し、パッケージをインストールします。（結構時間かかります。）

command
npm install

6. gulp で起動する。

インストールが完了したら、下記コマンドを入力することでGulpを起動することができます。

command
gulp

無事ブラウザで下記の画面が開けたら、成功です！

もう一度Gulpを起動したい時

一度PCをシャットダウンした等・・・Gulpを落としてからもう一度立ち上げた際は、下記の手順で起動できます。
1. ターミナルを起動し、5.で行ったディレクトリ移動を行う。
2. gulpと入力し実行

2回目〜のGulpの使用方法

上記4〜6を行うことで、Gulp環境を構築できます。

画像軽量化のタスク起動方法

画像軽量化タスクは常時起動しているとめちゃくちゃ重たくなってしまったので、watchタスクに入れておりません。
画像を保存する度に、ターミナルで下記コマンドを実行してください。

command
gulp optimizeImage

その他補足

https://github.com/aki0923f/my_template 内のファイルの使用方法は README.md に記載しておりますので、併せてご覧ください。

また、何か改善点やお気づきの点がございましたらフィードバック頂けますと嬉しいです。