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 に置いてありますので、なにかの参考になれば幸いです。
2015年10月26日に公開され、2018年1月4日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。