gulp で JavaScript の圧縮や結合を自動化する

gulp を使用して、javascript のファイルを圧縮や結合するタスクを自動化します。

gulp

gulp は開発時に必要なタスクを自動化するためのツールです。

導入

npm でインストールします。

設定

gulpfile.js を作成してタスクを設定します。

処理用タスクと watch 用タスク、デフォルト時のタスクも設定します。

  • plumber:タスク実行時にエラーで停止して、watch が止まってしまうのを防ぎます。
  • sourcemaps:デバッグ用にソースマップを出力するようにします。
  • concat:ファイルを結合します。
  • uglify:minify 化します。

実行

設定したタスクを実行

処理用として設定した test タスクを実行します。

watch タスクを実行

対象ファイルを更新するたび gulp タスクが実行されます。

まとめ

今回は gulp プラグインのみで設定してみました。

単純なタスクであれば簡単に設定から動作まで出来ますので、負担も無く開発効率をあげられそうです。

参考

公式:gulp.js

 

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA