gulp
とか使用するとき、install方法として、npm install -g gulp
とか書いてますよね。
これグローバルにinstallしてるので、グローバルが汚染されて嫌だなと思ってました。
ローカルインストールすると、gulp
コマンドを直接実行できないので、npm-script
通して間接的に使ってました。
npm
v5.2.0からnpx
が追加されました。
これでローカルパッケージを実行することができます。
また、パッケージを一時的に利用することも可能です。
vue-cli
やcreate-react-app
などテンプレートを使用してプロジェクトを始めるときにグローバルinstallが不要なので有用ではないでしょうか。
使い方(ローカルパッケージ)
以下は、gulp
でPostCss
を使用してcss/test.css
をvcender prefixを付加したcssに変換出力タスクを実行する例です。
利用パッケージ
パッケージ | バージョン |
---|---|
gulp | 3.9.1 |
gulp-postcss | 7.0.1 |
autoprefixer | 8.3.0 |
gulpfile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
'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')); }); |
コマンド
1 2 |
npx gulp css |
使い方(パッケージの一時利用)
以下がcreate-react-app
を一時利用する場合です。
パッケージ名とコマンド名が同一の場合は、以下の形式で可能です。
1 2 |
npx create-react-app <プロジェクト名> |
vue-cli
の様に、パッケージ名とコマンド名が異なる場合は、-p
オプションでパッケージを指定したのちに、実行したいコマンドを記載します。
1 2 |
npx -p vue-cli vue init webpack <プロジェクト名> |
nodist利用時の注意点
nodist
を使用してnode.jsを入れ、利用している場合、nodist npm match
を実行してnpx
が入っているバージョンに変えてもnpx
が入っていません。
その場合は、以下でinstallすることで可能です。
1 2 |
npm install -g npx |
npmパッケージをグローバルにインストール。。。
npmのバージョンが低い場合
nodist
利用時の注意と同様に以下コマンドを実行してください。
1 2 |
npm install -g npx |