GulpやSassを使う時に覚えて幸せになったnpmの便利な使い方

16
いいね
2
コメント

2017年01月27日に更新

昨今のweb開発で必要なBabel・Sass・Gulp・Webpackといった技術は、Node.jsのパッケージ管理ツール「npm」を通して使われます。npmの機能は豊富で、覚えておくと便利な使い方がいくつもあります。特にお勧めのものをピックアップしました。

`npm init`には`-y`をつけるとダイアログが表示されない

npmのモジュールを用いたプロジェクトを作成する際、最初に使用するコマンドはnpm initです。実行すると、プロジェクト名や著作権の設定がダイアログが表示され、必要な項目を入力したり、Yes([Enter]キー）を入力する必要があります。

特に設定が不要な場合、-yオプションを指定することで、ダイアログを表示することなく初期化できます。

プロジェクトの初期化を省略

npm init -y

次に示すのは、npm initとnpm init -y実行後のコマンドラインの差です。npm initはnameやversionといった設定をダイアログ式で尋ねられますが、npm init -yではそれがありません。

インストールコマンドの省略

パッケージインストール時のnpm installコマンドは使用頻度が高いですが、わざわざinstallと7文字も打つのは面倒です。i一つで省略ができます。

installの省略

npm i

パッケージのインストールはこうなります。

パッケージのインストール

npm i (パッケージ名)

依存オプションの省略

開発時のみに利用するパッケージをインストールしてpackage.jsonに記録するため、npm install --save-dev (パッケージ名)とすることが多いでしょう。--save-devと10文字も書くのは時間がかかるしタイプミスをしてしまう恐れがあるので、-Dで省略しましょう。

ローカルへのインストール

npm i -D

例えば、Gulpをローカル環境にインストールするならば、次のようになります。

ローカルへのインストール

npm i -D gulp

ちなみに、saveオプションのみを指定するs、グローバル指定をする-gもよく使います。

アンインストールコマンドの省略

パッケージのアンイストールuninstallは、unで省略できます。

パッケージのアンインストール

npm un (パッケージ名)

パッケージをアンインストールし、package.jsonからも削除する場合は、前述の-Dオプションと組み合わせます。

npm un -D (パッケージ名)

パッケージはまとめてインストール可能

開発環境を構築する際、1モジュールずつインストールしていくのは手間です。

パッケージを一つずつインストール

npm i -D gulp
npm i -D webpack
npm i -D node-sass

パッケージはまとめてインストールできるので、時短になります。

パッケージを一つずつインストール

npm i -D gulp webpack node-sass

キャッシュをクリアしてパッケージを再インストールする

パッケージのインストール、アンインストールを繰り返していると、キャッシュゆえに予期せぬエラーが発生する場合があります。モジュールの挙動がおかしい場合は、キャッシュをクリアしモジュールの再インストールを試してみると解決できる場合があります。

node_modulesフォルダの削除
npm キャッシュの削除
packge.jsonに記載されたパッケージの再インストール

の実行方法は下記の通りです。

パッケージの再インストール

rm -rf node_modules
npm cache clean
npm i

スクリプトの実行(npm-scripts)

package.jsonのscriptsに記述したスクリプトをnpm run (スクリプト名)実行できるnpm-scriptsの機能があります。たとえば次のように文字列を「Hello tonkotsuboy!!」という文字列を出力する「mytask」を記述します。

pakage.json

{
  "scripts": {
    "mytask": "echo 'Hello tonkotsuboy!!'"
  },
}

プロジェクトフォルダに移動し、npm runコマンドをmytaskを実行します。

コマンドライン

npm run mytask

npm-scriptsの強みは、node_modules以下にインストールしたモジュールを実行できる点です。例えばGulpはグローバル環境、ローカル環境の両方にgulpをインストールするのが一般的ですが、npm-scriptsを駆使すればグローバルにGulpをインストールする必要がなく、ローカル環境のパッケージのみに依存した構成が可能です。

npm-scriptsでGulpを使う例

{
  "scripts": {
    "build": "gulp build",
    "watch": "gulp watch"
  }
}

npmを恐れることなかれ

npmを使ったコマンドライン操作は今の時代避けて通れませんが、工夫次第で便利に操れます。特にinstall周りの省略は、タイピング量が減ってミスを防ぐことができます。お勧めのコマンドばかりなので、知らないものがあれば是非試してみてください。

昨今のweb開発で必要なBabel・Sass・Gulp・Webpackといった技術は、Node.jsのパッケージ管理ツール「[npm](https://www.npmjs.com/)」を通して使われます。**`npm`の機能は豊富で、覚えておくと便利な使い方がいくつもあります**。特にお勧めのものをピックアップしました。

# `npm init`には`-y`をつけるとダイアログが表示されない
`npm`のモジュールを用いたプロジェクトを作成する際、最初に使用するコマンドは`npm init`です。実行すると、プロジェクト名や著作権の設定がダイアログが表示され、必要な項目を入力したり、Yes([Enter]キー）を入力する必要があります。

**特に設定が不要な場合、`-y`オプションを指定することで、ダイアログを表示することなく初期化できます**。

```bash:プロジェクトの初期化を省略
npm init -y
```

次に示すのは、`npm init`と`npm init -y`実行後のコマンドラインの差です。`npm init`は`name`や`version`といった設定をダイアログ式で尋ねられますが、`npm init -y`ではそれがありません。

![npminit.png](https://qiita-image-store.s3.amazonaws.com/0/67884/3fc0afc2-2fcc-83b9-8d05-a244205ffce2.png)

# インストールコマンドの省略
パッケージインストール時の`npm install`コマンドは使用頻度が高いですが、**わざわざ`install`と7文字も打つのは面倒です。`i`一つで省略ができます**。

```bash:installの省略
npm i
```

パッケージのインストールはこうなります。

```bash:パッケージのインストール
npm i (パッケージ名)
```

## 依存オプションの省略
開発時のみに利用するパッケージをインストールして`package.json`に記録するため、`npm install --save-dev (パッケージ名)`とすることが多いでしょう。**`--save-dev`と10文字も書くのは時間がかかるしタイプミスをしてしまう恐れがあるので、`-D`で省略しましょう**。

```bash:ローカルへのインストール
npm i -D
```

例えば、Gulpをローカル環境にインストールするならば、次のようになります。

```bash:ローカルへのインストール
npm i -D gulp
```

ちなみに、`save`オプションのみを指定する`s`、グローバル指定をする`-g`もよく使います。

## アンインストールコマンドの省略
パッケージのアンイストール`uninstall`は、`un`で省略できます。

```bash:パッケージのアンインストール
npm un (パッケージ名)
```

パッケージをアンインストールし、package.jsonからも削除する場合は、前述の`-D`オプションと組み合わせます。

```bash
npm un -D (パッケージ名)
```

# パッケージはまとめてインストール可能
開発環境を構築する際、1モジュールずつインストールしていくのは手間です。

```bash:パッケージを一つずつインストール
npm i -D gulp
npm i -D webpack
npm i -D node-sass
```

パッケージはまとめてインストールできるので、時短になります。

```bash:パッケージを一つずつインストール
npm i -D gulp webpack node-sass
```

# キャッシュをクリアしてパッケージを再インストールする
パッケージのインストール、アンインストールを繰り返していると、キャッシュゆえに予期せぬエラーが発生する場合があります。**モジュールの挙動がおかしい場合は、キャッシュをクリアしモジュールの再インストールを試してみると解決できる場合があります**。

1. node_modulesフォルダの削除
2. npm キャッシュの削除
3. packge.jsonに記載されたパッケージの再インストール

の実行方法は下記の通りです。

```bash:パッケージの再インストール
rm -rf node_modules
npm cache clean
npm i
```

# スクリプトの実行(npm-scripts)
package.jsonの`scripts`に記述したスクリプトを`npm run (スクリプト名)`実行できるnpm-scriptsの機能があります。たとえば次のように文字列を「Hello tonkotsuboy!!」という文字列を出力する「`mytask`」を記述します。

```json:pakage.json
{
  "scripts": {
    "mytask": "echo 'Hello tonkotsuboy!!'"
  },
}
```

プロジェクトフォルダに移動し、`npm run`コマンドを`mytask`を実行します。

```bash:コマンドライン
npm run mytask
```

![](https://qiita-image-store.s3.amazonaws.com/0/67884/70ebaf8c-6ba9-91d1-1970-5f63c923e0b1.png)

**npm-scriptsの強みは、node_modules以下にインストールしたモジュールを実行できる点です**。例えばGulpはグローバル環境、ローカル環境の両方にgulpをインストールするのが一般的ですが、npm-scriptsを駆使すればグローバルにGulpをインストールする必要がなく、**ローカル環境のパッケージのみに依存した構成が可能です**。

```json:npm-scriptsでGulpを使う例
{
  "scripts": {
    "build": "gulp build",
    "watch": "gulp watch"
  }
}
```

# npmを恐れることなかれ
npmを使ったコマンドライン操作は今の時代避けて通れませんが、工夫次第で便利に操れます。特に`install`周りの省略は、タイピング量が減ってミスを防ぐことができます。お勧めのコマンドばかりなので、知らないものがあれば是非試してみてください。

tonkotsuboy_com

5977Contribution