久々に修正を加えたコードがうまくコンパイルできなかったので、対処方法とその時の学びについて。

CSSのプリプロセッサーであるメタ言語のSassをコンパイルする時に使っている”gulp-sass”が下記のようにエラーを吐いていたので調べてみました。

[code]
throw new Error(errors.unsupportedEnvironment());
[/code]

結論から言えばバージョンが古いので最新版のモジュールをインストールすればよいです。なのでnpm install gulp-sassでokなはず。
詳しくみたいかたは先に進んでください。


Node Sass does not yet support your current environment (macOS 10.12.1, Node 7.0.0) · Issue #1764 · sass/node-sass · GitHub

「そのバージョンではサポートしてないよ」ってことらしいので、まずはgulp-sassのバージョンを調べてみます。
package.jsonのあるディレクトリで下記コマンドを実行します。

[code]
npm outdated
[/code]

Currentの行が現在のバージョンで、Latestは最新バージョンです。
Wantedはなんでしょうか…。

npm-check-updatesというnpmのモジュールを更新&確認する『GitHub – tjunnone/npm-check-updates: Find newer versions of package dependencies than what your package.json or bower.json allows』を見つけたので「まさに!」と思い試してみました。

まずは-gのオプションをつけてグローバルにnpm-check-updatesをインストールします。
ncuに-uのオプションをつけるとpackage.jsonも更新されるようなので、gulp-sassを更新しpackage.jsonも更新します。

[code]
npm install -g npm-check-updates
ncu -u gulp-sass
[/code]

もういちどoutdatedをかけてみると、消えてしまっていました。
使い方間違えたかな…。

消えちゃったので普通にgulp-sassだけを再度インストール

[code]
npm install gulp-sass
[/code]

バージョンの指定はしてないので最新版がインストールされて、無事にエラーは消えました。
最初からこれでよかったのではないだろうか…。

参考の記事はこちら

npm installしたパッケージの更新確認とアップデート(npm-check-updates) – dackdive’s blog

おまけ

週末に開催されるWordPressのお祭り『WordCamp Bangkog』のためにタイに来ています。
今日はJoeのおすすめの場所でコワークしてます。

We co-working at Bangkog! #theta360 – Spherical Image – RICOH THETA