ローディング中

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

gulp
こんにちは。

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

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

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

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

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

・7つの工程

・分かりやすく

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

Gulpを使うと、

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

・画像を圧縮

・cssやJavaScriptファイルの圧縮

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

Gulpをご存知ですか?

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-19-21-03-06

グルプ?グルピー?

読み方はガルプです。

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

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

まずは導入してみよう

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

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

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

node

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タスクを実行してみよう

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

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-19-20-37-12

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

gulp minicss

とコマンドを打つと

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-19-20-38-33

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

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

これで完了です。

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

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

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

npm install

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

まとめ

Gulpを導入すると、

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

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

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

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

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.