古くなったgulpのdevDependenciesを一気に更新する方法

Advertisement

1年前に作ったgulpのタスクを久々に触ったら、package.jsonにあるdevDependenciesがかなり古くなっていました。そこで、これらを一気にアップデートする方法を探していたら、やっぱりありました。

npm-check-updates というツールが。

このツールを使うと、package.jsonにあるdevDependenciesのバージョンと最新のものを比較して見せてくれます。そして、コマンドを叩くだけで、古くなったすべてのdevDependenciesをアップデートしてくれます。

やり方は簡単で、まずはnpm-check-updatesをインストール:

% npm install npm-check-updates -g

npm-check-updatesを走らせる:

% ncu

すると以下のように古くなっているものを教えてくれます:

% ncu

 gulp-newer      ^0.5.1  →  ^1.0.0
 gulp-ruby-sass  ^0.6.0  →  ^2.0.5

Run with -u to upgrade package.json

最後に、以下のコマンドでpackage.jsonをアップデートできます。

% ncu -u

パッケージ自体のアップデート

あとは、以下のコマンドでパッケージ自体をアップデートできます:

% npm update

パッケージのアップデートの際の注意点

当然なんですけど、僕みたいに1年も放置しておくと、さすがにgulpfile.jsもそのままでは動きませんでした。パッケージもアップグレードされると使い方が変わる場合もあるので、アップデートの際はお気をつけください!

今回はそれを覚悟でアップデートしたので良かったですが、普段の開発環境のアップデートの際には丁寧に一つ一つ見ていった方が良さそうです。ただ、最終的にはパッケージがいろいろ改善されていて、gulpfile.jsの面倒な記述も減ってよりシンプルになったので、一気に更新してしまって良かったかなぁと思ってます。

動かない場合の最終的な手段

gulpfile.jsをアップデートしても変なエラーが出るという場合は、node_modulesフォルダを一掃して、すべてのdevDependenciesを再インストールしてしまうのも手かもしれません。使っていたほとんどのパッケージがかなり古くなっていたので、今回の僕の場合はその方法をとりました。あくまで自己責任で。

ちなみに、今回アップデートしたgulpタスク(sass、postcss、browser-sync、画像最適化)はgithub に置いてありますので、なにかの参考になれば幸いです。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。