Gulpを使ってweb制作を効率化!7つの工程で分かりやすく作業環境を構築!

Gulpを使ってweb制作を効率化!7つの工程で分かりやすく作業環境を構築!
こんにちは。

キモキャラ担当の金澤です。

最近は社内でのキャラが立ってきて嬉しいです。

コンセプトは尖らせてなんぼですね。

さて、本日はコーディングを始め出した駆け出しの方向けに、

いつもやる作業の自動化をGulpを使ってやってみましょう的なお話を

・7つの工程

・分かりやすく

・命令を実行するところまでお届けしたいと思います。

Gulpを使うと、

・sassのコンパイルを自動化

・画像を圧縮

・cssやJavaScriptファイルの圧縮

などが、自分で決める命令で実行できるようになります。

Gulpをご存知ですか?

Gulpを使ってweb制作を効率化!7つの工程で分かりやすく作業環境を構築!

グルプ?グルピー?

読み方はガルプです。

タスクランナーと言いまして、要するに「いつもする作業を自動化できまっせ!」

というお話でございます。

まずは導入してみよう

今回はこちらの記事を参考にさせて頂きました。

1.Node.jsをインストール

Gulpを使うためにはまずNode.jsが必要なので、公式サイトでインストーラをゲットしましょう。

Gulpを使ってweb制作を効率化!7つの工程で分かりやすく作業環境を構築!

LTSは安定してますよって感じで、

Currentは最新作ですよって感じです。

お好みでどうぞ。

ちなみに僕はv6.x.xバージョンです。

インストーラを起動し、インストールし終わったら、

コマンドnode -vでバージョンが表示されると成功です。

2.Gulpをインストール

Gulpはグローバルとローカルにインストールする必要がありますが、

まずはグローバルから

npm install --global gulp-cli

※macでうまくいかないときは管理者権限でsudoをつけてみてください。

sudo npm install --global gulp-cli

と入力し、インストール後、

gulp -vでバージョンが表示されれば完了!

3.さっそくGulpを使いたいフォルダに移動しpackage.jsonを作成

コマンドで

cd /xxx/xxx/xxxx.xxx

と、打ってもいいですが、

フォルダを右クリック→[サービス]→[フォルダに新規ターミナルタブ]で開くと楽です。

※フォルダに新規ターミナルの項目がない方は、

[システム環境設定]→[キーボード]→[キーボードショートカット]→[サービス]を開いて、

フォルダに新規ターミナル」「フォルダに新規ターミナルタブ」にチェックを入れます。

移動しましたら、

npm init

と入力します。プロジェクト名など聞かれますが、特にこだわらなければenter連打でいきましょう。

成功すると、package.jsonというファイルが作成されます。

インストールしたプラグインなどが記載されていくファイルです。

中身はこんな感じです。

4.Gulpをローカルにもダウンロード

sudo npm install --save-dev gulp

と入力しダウンロードします。

使いたい機能(Gulpプラグイン)をダウンロード

npm install --save-dev (プラグイン名)

–save-devを入力する事で、package.jsonの中の

“devDependencies”というところに

プラグイン名:バージョン

という形で保存されます。

5.実際にプラグインをダウンロードしてみましょ

とりあえずcssを圧縮してくれる、

gulp-minify-cssというプラグインをダウンロードしてみましょう。

sudo npm install --save-dev gulp-minify-css

はい。インストールされましたね。

確認するにはpackage.jsonを覗いてみてください。

“devDependencies”というところに追加されていますね。

6.Gulpプラグインを使う

プラグインをインストールしただけでは使えません。

gulpfile.jsというファイルを作って、こんな感じで記載する必要があります。

7.実際にGulpタスクを実行してみよう

この状態だった作業フォルダ内が

Gulpを使ってweb制作を効率化!7つの工程で分かりやすく作業環境を構築!

先ほど自分で作成したタスク

gulp minicss

とコマンドを打つと

Gulpを使ってweb制作を効率化!7つの工程で分かりやすく作業環境を構築!

distフォルダが追加されている!

そしてその中にもちろんcssフォルダと、圧縮されたcssファイルが作成されていました。

これで完了です。

一度作ったGulp環境はコピー出来る

違うプロジェクトで同じようにGulpを使いたい時には、

package.jsonファイルを新しい作業フォルダにコピーし、

npm install

と入力するだけで、一発で同じ環境が出来上がります。まぁ便利。

まとめ

Gulpを導入すると、

様々なプラグインで自分好みに環境を設定できますので、

是非導入してみて下さい。

sassファイルを上書き保存したら、自動でコンパイルしてcssが作成される

という記事も書きましたので、合わせてお読みください。

ありがとうございました^^

Instagram Feed

Load More

Instagram

コーダー

yu.kanazawa

シンガー、俳優とクリエイティブな活動をしながら、アルバイト、会社員、ニート、個人事業主経て株式会社awesomeに所属。関わる人に楽しさを提供する事を信条に掲げ、0ベースからビジネスを創れるように、奮闘中です。

他の投稿を見る →