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に変換出力タスクを実行する例です。
利用パッケージ
| パッケージ | バージョン |
|---|---|
| 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 |
ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！
中日ドラゴンズを応援してます。
