徒然畑

徒然なるままに。

Gulpと仲良くなるためにまとめたメモ

ついに弊社フロントチームにもwebpack化の波がきました。
それまではgulpをベースとして開発環境を構築しておりましたが、
いろいろとwebpackの方が利便性が高いということで、だそうです。

というわけで。
案件で初めてgulpファイルを書くことになってその時に色々まとめたメモを
弊社gulp追悼の意を込めて公開しておこうと思います。

Gulpとは

・ビルドシステムヘルパー、またはタスクランナーと呼ばれるnode.jsツール
・タスク=ビルドと考え、登録されたタスクを実行していくもの
・複数のビルド処理(コンパイル処理)が必要なものをそれぞれ依存関係を極力減らして動かせるやーつ
・node.jsの強みを生かしたストリーム処理で動くのが特徴、とのこと。以下参考
qiita.com

gulpfileを書く

・基本的には「task()でタスク登録してseries()かparallel()かを指定して動かす、とまずは覚えておく
・どんなことできるか全部知りたい人はここ見てね(英語)
github.com
・ES6でgulpfile書こうとする時はBabel噛ませる必要がある。以下参考。
tacamy.hatenablog.com

拡張機能について

・まず、gulpで使える拡張機能
1. 「gulpの拡張機能で提供しているもの」
2. 「node.jsの機能として提供しているもの(npmパッケージ)」
の2つがある。
・gulpの拡張機能でもやばいやつに関してはBlaklistとしてまとめられているので、gulpの拡張機能として存在したとしても使わない方がいいやつに関してはチェックすること
plugins/blackList.json at master · gulpjs/plugins · GitHub

弊社の開発環境で使っていた拡張機能

sassGlob

Scssのimportをすっきりまとめてくれる。以下参考
qiita.com

readConfig

Configfile(設定ファイル)を読み込んできてくれる。jsonとかymlとかどっちの形式でも大丈夫
qiita.com

pleeease

CSSコンパイルや管理にまつわることならこいつ一個で全部やれる。autoplefixはもちろんminifyとかもしっかりやってくれるよ。
phiary.me

参考になる入門記事

入門記事などとしてはここら辺読むと良い(きがする)
app.codegrid.net
ics.media
blog.anatoo.jp


qiitaに載せようか否か迷ったんですけど
基本的に自分のメモがリンクばっかなので
サイトのリンクとかいい感じの見た目で貼れるはてブの方で書くことにしたのでした。