2021.03.10

Node.js

npm run-scriptでgulpを実行

ローカルにインストールしたnpmパッケージの実行は、npxコマンドを利用するのが簡単です。以下のgulpfile.jsでテストします。各タスクのfunctionの引数のdoneとfunction内のdone();の処理はcallbackで、タスクの処理の終了を意味します。callbackがないと処理が終了せずエラーになります。

//gulpfile.js
const gulp = require('gulp');

//test01
function funcDefaultTask(done) {
  console.log('message-01');
  done();
}
//test02
function funcTask01(done) {
  console.log('message-02');
  done();
}
//test03
function funcTask02(done) {
  console.log('message-03');
  done();
}

//gulp
gulp.task('default', funcDefaultTask);
//gulp task01
gulp.task('task01', funcTask01);
//gulp task02
gulp.task('task02', funcTask02);
//gulp task03
gulp.task('task03', gulp.series(funcDefaultTask, funcTask01, funcTask02));

npxでgulpを実行する際、gulpのタスク名を指定せずに実行すると、gulpfile.js内のtaskメソッドの第一引数が「default」のタスクのみ実行します。default以外のタスクを実行する場合は「npx gulp taskメソッドの第一引数」のようにタスク名を指定して実行します。

npx gulp
message-01

npx gulp task01
message-02

npx gulp task02
message-03

npx gulp task03
message-01
message-02
message-03

今度はgulpをnpxではなくnpm run-scriptを利用して実行します。まずpackage.jsonのscriptsフィールドを"スクリプト名": "コマンド"のように複数記述します。npm init直後に作成されるtestは削除して問題ありません。

//package.json
//変更前(npm init直後)
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
}
↓
//変更後
{
  "scripts": {
    "default": "gulp",
    "task01": "gulp task01",
    "task02": "gulp task02",
    "task03": "gulp task03",
    "start": "gulp task03"
  },
}

次にpackage.jsonのscriptsフィールドを、npm run スクリプト名のように記述して実行します。

npm run default
message-01

npm run task01
message-02

npm run task02
message-03

npm run task03
message-01
message-02
message-03

npm run start
message-01
message-02
message-03

なお最後のnpm run startのstartは、予約された特別なスクリプト名です。npm startのように短縮形のコマンドでも実行が可能です。

npm start
message-01
message-02
message-03

関連記事

2021.01.11

Node.js

npm initによるpackage.jsonの作成とパッケージのインストール

プロジェクトを作成するディレクトリでnpm initを実行してpackage.jsonを作成します。対話形式で作成しますが何も入力せずEnterキーで進めていく…

2021.02.07

Node.js

gulp-scss-lintの動作要件

gulp-scss-lint実行時に以下のようなエラーが発生する場合があります。これはgulp-scss-lintがインストールされているにもかかわらず、scs…

2021.03.21

Node.js

gulp-postcssでpostcss-sortingを実行

gulp-postcssはgulp上でPostCSSが実行できます。postcss-sortingはPostCSSのプラグインで、CSSプロパティの記述順を並べ…

2021.01.12

Node.js

gulp 4.0で導入されたseriesとparallelについて

gulp4.0から新しくseriesとparallelが導入され、タスクの処理の順番を制御できるようになりました。 seriesは直列に処理を実行する同期処理で…

2021.01.11

Node.js

パッケージのバージョン指定インストールとpackage-lock.json

パッケージインストール時にパッケージ名の後に@を付けると、パッケージのバージョンの指定ができます。以下はjqueryのバージョン3.4.1インストール時の指定で…

上に戻る