ブーツをgruntにしてください！ NPMをビルドツールとして使用するためのガイド

Grunt、Gulp、Broccoli、Jakeなど、多くのフロントエンドビルドおよびワークフローツールが存在します。 これらのツールは、模倣、連結、テスト、コードコンパイルなどの繰り返しプロジェクトタスクを自動化します。ただし、別の依存関係を追加するのは不要な場合があります。 組み込みのnode.js代替NPMは、これらのタスクの多くを効果的に処理します。この記事では、NPMのビルドツールとしての機能について説明します。 NPM初心者については、入門ガイドをご覧ください。コードの例はgithubで入手できます。

NPMをビルドツールとして使用することの重要な利点：

依存関係の削減：
• NPM（node.jsに含まれる）を活用して、GruntやGulpなどの追加ツールの必要性を最小限に抑える。 自動化されたNPMスクリプト：
• 内でnpmスクリプトを使用して、ワークフローを合理化する糸くず、テスト、および削減を自動化します。 package.json簡略化されたビルドプロセス：
包括的なビルドプロセス（糸くず、テスト、模倣）の複数のNPMスクリプトを順番に実行しました。
• 強化された開発のためのプリ/ポストフック：プリフックとポストフックを利用して、テスト前に糸くずなどのタスクを自動化し、コードの品質を確保します。 NPMによる自動監視：
• ファイルの変更を監視するようにnpmを構成し、タスクを自動的にトリガーし、グラントまたはガルプの機能をよりシンプルなセットアップで複製します。
npmスクリプトの作業：
• プロジェクトディレクトリ（ "buildtool"）を作成し、ナビゲートし、：
を使用して

を初期化します

プロンプトに応答するか、スキップします。 コンテンツを次のように置き換えます

package.jsonオブジェクトはコマンドを定義します。 利用可能なスクリプトをnpm initにリストします。

を使用して特定のスクリプト（「情報」など）を実行します。

<code class="language-bash">$ mkdir ~/buildtool && cd ~/buildtool
$ npm init</code>

フラグサイレンスnpm出力。

package.json

一般的なワークフローの実装：

<code class="language-json">{
  "name": "buildtool",
  "version": "1.0.0",
  "description": "npm as a build tool",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "info": "echo 'npm as a build tool'"
  },
  "author": "SitePoint",
  "license": "ISC"
}</code>

scripts最初に、jshint：npm runを使用してJavaScriptの糸くずを追加しましょう npm run info -sプロジェクトディレクトリ構造の作成：

（unixシステムでは、

>

を使用します

<code class="language-bash">$ npm install jshint --save-dev</code>

糸くず：

<code class="language-bash">├── assets
│   ├── css
│   │   └── main.css
│   └── scripts
│       └── main.js
├── dist
├── package.json
├── node_modules
└── test
    └── test.js</code>

コードを追加します（意図的なエラーを使用）：

に mkdir -p assets/css assets/scripts test && touch assets/css/main.css assets/scripts/main.js test/test.jslintを含める

lint：

を実行してコードを並べます。 エラーを修正し、再実行して確認してください

main.jsテスト（MoChaを使用）：

<code class="language-javascript">"use strict";

var Author = new function(name){
  this.name = name || "Anonymous";
  this.articles = new Array();
}

Author.prototype.writeArticle = function(title){
  this.articles.push(title);
};

Author.prototype.listArticles = function(){
  return this.name + " has written: " + this.articles.join(", ");
};

exports.Author = Author;

var peter = new Author("Peter");
peter.writeArticle("A Beginners Guide to npm");
peter.writeArticle("Using npm as a build tool");
peter.listArticles();</code>

Mocha：package.jsonをインストールします

<code class="language-json">"scripts": {
  "info": "echo 'npm as a build tool'",
  "lint": "echo '=> linting' && jshint assets/scripts/*.js"
}</code>

：npm run lint -sで簡単なテストを作成します

<code class="language-bash">$ mkdir ~/buildtool && cd ~/buildtool
$ npm init</code>

テストスクリプトをpackage.json：

に追加します

<code class="language-json">{
  "name": "buildtool",
  "version": "1.0.0",
  "description": "npm as a build tool",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "info": "echo 'npm as a build tool'"
  },
  "author": "SitePoint",
  "license": "ISC"
}</code>

runnpm test -s。

フック前後のポスト：

テスト前に糸くずを実行するには、pretestフック：

を追加します

<code class="language-bash">$ npm install jshint --save-dev</code>

さて、npm test -s最初にLINTスクリプトを実行します。

コードの縮小：

インストールuglify-jsおよびclean-css：

<code class="language-bash">├── assets
│   ├── css
│   │   └── main.css
│   └── scripts
│       └── main.js
├── dist
├── package.json
├── node_modules
└── test
    └── test.js</code>

package.json：

で模倣スクリプトを作成します

<code class="language-javascript">"use strict";

var Author = new function(name){
  this.name = name || "Anonymous";
  this.articles = new Array();
}

Author.prototype.writeArticle = function(title){
  this.articles.push(title);
};

Author.prototype.listArticles = function(){
  return this.name + " has written: " + this.articles.join(", ");
};

exports.Author = Author;

var peter = new Author("Peter");
peter.writeArticle("A Beginners Guide to npm");
peter.writeArticle("Using npm as a build tool");
peter.listArticles();</code>

runnpm run minify:js -sおよびnpm run minify:css -s。

変更を監視している（watchを使用して）：

インストールwatch：

<code class="language-json">"scripts": {
  "info": "echo 'npm as a build tool'",
  "lint": "echo '=> linting' && jshint assets/scripts/*.js"
}</code>

時計スクリプトを追加：

<code class="language-bash">npm install mocha --save-dev</code>

ファイルの変更で自動的に縮小するnpm run watch

を実行します

ビルドスクリプト：

スクリプトを単一の

スクリプトに結合します：build

<code class="language-javascript">var assert = require("assert");
var Author = require("../assets/scripts/main.js").Author;

// ... (test code) ...</code>

run

。npm run build -s

サーバースクリプト（を使用）：http-server

インストール

：http-server

<code class="language-json">"scripts": {
  // ...
  "test": "echo '=> testing' && mocha test/"
}</code>

サーバースクリプトを追加：

<code class="language-json">"scripts": {
  // ...
  "pretest": "npm run lint -s"
}</code>

run

。npm run server

結論：

NPMは、専用のビルドツールに強力で柔軟な代替品を提供します。 より単純なプロジェクトのために、グラントまたはガルプに頼る前に、最初にNPMを使用することを検討してください。 以下のFAQSセクションは、さらなる明確化を示します

（FAQを含む元の入力の残りの部分は、主に上記の概念の繰り返しであるため、ここではここでは省略されています。コア機能と例は保存されています。）

以上がブーツをgruntにしてください！ NPMをビルドツールとして使用するためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。