gulp + sass で目指せ倍速コーディング（第2回 gulpfile.jsの分割管理と画像作成の効率化）

テーマ

gulpとsassを使いコーディング効率を速度を上げ、短時間でより多くの案件をこなせるようになろう！

概要

ホームページのコーディング、１案件にどのくらい時間をかけていますか？

どんなにHTMLとCSSの知識が豊富でも1日に書けるコードの量には限りがあるかと思います。
自動化できることは自動化し、省略できるところは省略し、時間を節約しましょう。

またsassを導入するとコードの見通しが良くなり修正も容易になります。
この機会に一緒に勉強してみませんか？

• gulp ... タスクランナー、様々な処理を自動化してくれます
• sass ... CSSプリプロセッサ、セレクタ入れ子にしたり、変数や簡易な関数を使えるのが特徴

今回のテーマ

１．gulpfile.js を分割して管理しよう

gulp への依存度が高くなると、gulpfile.js の記述が増えどこに何の処理を入れたかわかりづらくなり管理が困難になります。

そこで今回はまず gulpfile.js を分割して管理する方法を導入し、今後追加するタスクを容易に管理できるようにします。

また gulpfile.js を別プロジェクトに流用できるよう、入力元た出力先などをオブジェクト化し一括管理できるようにします。

２．画像を自動で最適化しよう

通信量の削減や表示速度向上のための画像最適化、TinyPNG (https://tinypng.com/) などで都度圧縮していませんか？

今回は作業時間の削減ということが主テーマですので、画像の圧縮も自動化したいと思います。任意のフォルダに画像を保存すると、出力先のディレクトリに最適化画像を生成するという一連の流れを構築します。

３．CSSスプライトを使ってみよう

皆さんはCSSスプライトを活用していますか？

最近ではレスポンシブ案件が増え、Retina対応用のCSSスプライトを別途用意する必要があり大きな負担になっています。またプロジェクト初期の段階ではきっちり作成していても、締め切りが近づいてくるとつい作業効率優先しがちです。

この点を解決するため、今回は任意のフォルダに画像を保存すると、出力先のディレクトリにCSSスプライト画像を生成するという一連の流れを構築します。さらに画像の最適化処理も間に入れたいと思います。

CSSスプライト画像が生成されると同時にインクルード用のSassファイルが自動生成されますので、これを活用して効率良くSassコーディングをします。

対象

今回の勉強会はHTMLとCSSの基礎的な知識があることを前提に進めさせていただきます。このため以下の知識が必須となります。

• HTML
• CSS

当日ご用意いただきたいもの

• ノートパソコン（必須）
• テザリングできるスマホ（あれば）

事前準備のお願い

** 【重要・必須】今回の勉強会は前回までの続きとなります。今回初参加をされる方は、環境構築と前回までの勉強会内容を予め進め、続きからできるようにしておいてください。 **

** １．gulp + Sass の環境準備 **
http://www.slideshare.net/toshimichisuekane/gulp-sass-2015-1

** ２．gulp + Sass 本編（第一回の内容） **
http://www.slideshare.net/toshimichisuekane/gulp-sass-2015-1-51123451

環境準備や本編の途中で分からないことがありましたら、メッセンジャーなどでお気軽にご質問ください。

末包 俊道 (facebook)
https://www.facebook.com/toshimichi.suekane

当日のスケジュール

＜ハンズオン＞

18:30 ... gulpfile.js を分割して管理しよう
19:15 ... 画像を自動で最適化しよう
20:00 ... CSSスプライトを使ってみよう
20:45 ... まとめ
21:00 ... 閉館時間のため一時解散

注意事項

会場はWi-Fiやネット環境がありません。通信する必要がありますので、各自テザリングできるスマホなど通信環境をご用意ください。（お持ちでなければテザリングをシェアしましょう）

懇親会

会場の時間が限られているため、閉館後に香椎まで移動して、食事しながらうまく行かなかった部分や分からない部分を話し合いましょう。（飲食費は3,000円前後目安）

主催

エクスコード株式会社
http://excode.jp
フロントエンドエンジニア　末包俊道