ディップ Advent Calendar 2017 16日目!!
そして私の23歳誕生日!!ヾ(´∀｀*)ﾉ
新卒としてディップに入社して早8ヶ月。
今回は 私が配属された FeETがこの2017年に新しくやったことを紹介しようと思います。
その前にFeETについて紹介を。
■ FeETとは
Front-end Expert Teamの略で、弊社サービス「バイトル」「はたらこねっと」を始めとする各プロダクトのフロントエンド開発を担当しているチーム。
ちなみにTはTeamのTなので、「FeETチーム」という呼び方は「頭痛が痛い」とよく似た誤った用法になる。
Advent Calendarにも参加してます！こちらもみてね 
5日目: <script>要素のdefer属性、async属性による外部JavaScriptの非同期読み込み
gulpの導入をしたよ
今フロントエンド界隈ではparcelがめっちゃ話題になってますね。
若干今更感もありながら 安心安定の gulp が遂に弊社にもやってきました
■ 導入の経緯
今までは地道に細かい作業を頑張ってきたFeET 
画像圧縮は、Kraken.ioというサイトでわざわざアップロードして圧縮。
コーディングルールもガイドラインを作ってそれぞれの解釈。
でも以前に比べてやらなければならないことが増えてきました。
こんなの手作業でやってたら日が暮れてしまう (実際そんなレベルじゃない)
そこで自動化しようぜ！！
となり gulpの登場である。
■ gulpに入れたパッケージ(Sass導入前)
-
gulp-plumber
- ストリーム中に起こるのエラーが原因でタスクが強制停止することを防止する
-
gulp-changed
- srcとdestをチェックして変更されたファイルだけをストリームに流す
-
gulp-imagemin
- 画像の圧縮
-
gulp-cssmin
- cssファイルを1行に圧縮
-
gulp-watch
- ファイルの変更・新規追加を監視
-
del
- パスのパターン（glob）を使って複数のファイルやディレクトリを削除
-
vinyl-paths
- パイプライン上のglobを取得したり、引数にdelモジュールを渡してdelを実行してくれる
-
gulp-css-base64
- 画像のDataURI化
-
run-sequence
- gulpでも簡単に直列/並列 処理を行う
■ gulpを入れた結果
圧縮後のCSSの総ファイルサイズが 15% も減少！！
いちいちサイト行ってアップロードして...と手間ひまかけてた画像圧縮も瞬時に最適化！！
→ 一気に作業効率が上がった
Sassも導入したよ
gulpを導入したことによって、コンパイルが必要なSassも使えるようになり
早速導入作業に入りました。
私達が今まで書いてきた 合計およそ **12万行**もの CSS を Scss記法 に沿って書き換えていくことに！
■ 導入手順
- Sass化用ブランチ Sandboxを作成
- ネスト変換から着手 → ジェネレータ(css2sass)使ってから調整する
- sass コーディングガイドライン作成
- 既存の css のサイトと Sandbox のサイトを目視で表示確認
(対象 PC:6ブラウザ, SP:4OS) - ルール確認共有会を開催
■ sassフォルダの構成
- カテゴリ別のscssファイルにする
- フォルダ名はファイル名に合わせる
- モジュールごとにファイルを分割する（common/globalHeader.css）
- @import.scssにすべてのimportを記載する
- モジュール以外のファイルは_をつける
■ gulpに入れたパッケージ(Sass導入後)
-
gulp-sass
- sassのコンパイル
-
gulp-autoprefixer
- CSSのベンダープレフィックス付与を自動化
-
gulp-sourcemaps
- ソースマップを出力
-
gulp-changed-in-place
- ファイルが更新されている（修正されている）か判断
-
gulp-if
- ストリームの処理を条件によって分岐
-
gulp-sass-lint
- scss のコードが設定に違反していた場合、警告をしてくれる
-
gulp-rename
- ファイル名を変更して出力する
-
gulp-clean-css
- cssファイルを1行に圧縮
- 以前は
gulp-cssminを使ってたけど sourcemap に対応してなかったためこちらに変更
-
gulp-eslint
- js のコードが設定に違反していた場合、警告をしてくれる
-
gulp-concat
- ストリーム中のファイルを結合
-
fs
- ファイルやディレクトリの操作を行う
-
path
- パスの正規化やパスの中からディレクトリ部分・ファイル名の部分だけ取得する
-
file-name
- 拡張子を除くファイルパスのベース名を取得
-
merge-stream
- 複数のストリームをマージする
-
gulp-postcss
- 多様なプラグインを用いてCSSを変換するポストプロセッサー
■ 今後期待されるSass化のメリット
今回特にディレクトリ構造をモジュール毎にファイル分割した影響が大きく
- 改修対象画面が多い中の作業でも、FE同士のgitのコンフリクトが減る
- 1つのファイル内の行数がかなり減ったため、編集の該当箇所がすぐ発見できる
- ex. 分割前の1ファイル 6271行から 分割後の1ファイル 216行にまで減ったファイルもある
- 変数を使うことによってパーツの編集が一度に出来て作業スピードが速くなる
など、さまざまなメリットがあるかと思います。
ほかにも色々やった2017年でした
Lintルールつくったり
FeETのガイドライン・運用ルール作成を作成したり
速度改善施策に携わったり(これのおかげで私の初のアウトプットが生まれたり)
FeETの体制がまた大きく変わった年になったんじゃないかなと思います。
新卒だから去年までの体制詳しくないですけど
来年も互いに刺激しあってどんどん成長していくFeETでありますように！