gulpとか使用するとき、install方法として、npm install -g gulpとか書いてますよね。
これグローバルにinstallしてるので、グローバルが汚染されて嫌だなと思ってました。

ローカルインストールすると、gulpコマンドを直接実行できないので、npm-script通して間接的に使ってました。
npmv5.2.0からnpxが追加されました。
これでローカルパッケージを実行することができます。

また、パッケージを一時的に利用することも可能です。
vue-cliやcreate-react-appなどテンプレートを使用してプロジェクトを始めるときにグローバルinstallが不要なので有用ではないでしょうか。

使い方(ローカルパッケージ)

以下は、gulpでPostCssを使用してcss/test.cssをvcender prefixを付加したcssに変換出力タスクを実行する例です。

利用パッケージ

gulpfile.js

'use strict';

const gulp = require('gulp');
const postcss = require('gulp-postcss');

// apply PostCSS plugins
gulp.task('css', function() {
  return gulp.src('css/test.css')
    .pipe(postcss([
      require('autoprefixer')({})
    ]))
    .pipe(gulp.dest('dest/css/test.css'));
});

コマンド

npx gulp css

使い方（パッケージの一時利用）

以下がcreate-react-appを一時利用する場合です。
パッケージ名とコマンド名が同一の場合は、以下の形式で可能です。

npx create-react-app <プロジェクト名>

vue-cliの様に、パッケージ名とコマンド名が異なる場合は、-pオプションでパッケージを指定したのちに、実行したいコマンドを記載します。

npx -p vue-cli vue init webpack <プロジェクト名>

nodist利用時の注意点

nodistを使用してnode.jsを入れ、利用している場合、nodist npm matchを実行してnpxが入っているバージョンに変えてもnpxが入っていません。
その場合は、以下でinstallすることで可能です。

npm install -g npx

npmパッケージをグローバルにインストール。。。

npmのバージョンが低い場合

nodist利用時の注意と同様に以下コマンドを実行してください。

npm install -g npx

奥山

ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！

中日ドラゴンズを応援してます。