gulpの学習 - スマレジエンジニアyushiのブログ

最近業務でgulpを使う機会があったので、プライベートでも触ってみて、まとめました。

gulpとは

gulpとは、JavaScript・CSS管理におけるタスクランナーツールと呼ばれるものです。

作成したJS・CSSを、minifyしたり、多環境対応したり、といった具合に使います。

似たような用途でwebpackなどもありますが、こちらはbundle（複数のファイルを１つにまとめる）することが主目的で、JS modulesが当たり前な現代では採用されがちです。
今回は、JS modulesがまだ適用されていなかったため、gulp採用となりました。

gulpfile

完成したgulpfileがこちらです。

https://github.com/nek0meshi/frontend-learn/blob/master/gulp/gulpfile.js

作成したJSとCSSに対して、いろいろな処理をして本番環境用のビルドを行います。

下記のコマンドを実行することで動作を確認できます。

cd gulp

# ライブラリのダウンロード
npm i

# gulpの実行
npm run gulp

# JSのみ、gulpの実行
npm run gulp scripts

# CSSのみ、gulpの実行
npm run gulp styles

# watch（ファイル更新を監視し、自動実行）
npm run gulp watch