給Grunt靴子！使用NPM作為構建工具的指南

>存在許多前端構建和工作流程工具，包括咕unt，吞噬，西蘭花和傑克。 這些工具可自動化重複的項目任務，例如縮小，串聯，測試和代碼彙編。但是，添加另一個依賴性可能是不必要的。 NPM內置的Node.js替代方案有效地處理了許多這些任務。本文探討了NPM作為構建工具的功能。 對於NPM初學者，請諮詢我們的入門指南。代碼示例可在GitHub上找到。

>

>>使用NPM作為構建工具的關鍵優點：>

• 降低依賴關係：利用npm（包括node.js），以最大程度地減少對grunt或Gulp的額外工具的需求。 >
>自動化的NPM腳本：
• >在內使用npm腳本來自動化覆蓋，測試和降低，簡化工作流程。 package.json
簡化的構建過程：
• 結合了多個NPM腳本，以依次執行綜合構建過程（固定，測試，降低）。 >用於增強開發的預/後掛鉤：
利用前鉤和後鉤子在測試前自動化裁剪等任務，以確保代碼質量。
• 使用NPM進行自動監視：
配置npm以關注文件更改並自動觸發任務（例如，降低），複製使用更簡單的設置的Grunt或Gulp的功能。
• >使用NPM腳本：

>

創建一個項目目錄（“ buildtool”），導航到它，然後使用初始化

：

：package.json npm init

回答提示或跳過；您將用以下方式替換

$ mkdir ~/buildtool && cd ~/buildtool
$ npm init

的內容

package.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"
}

執行特定腳本（例如，“ info”）。

標誌靜音NPM輸出。 scripts npm run npm run info實現通用工作流程：-s

首先，讓我們使用jshint添加JavaScript linting：>

創建項目目錄結構：

$ npm install jshint --save-dev

（在Unix系統上，使用

）

├── assets
│   ├── css
│   │   └── main.css
│   └── scripts
│       └── main.js
├── dist
├── package.json
├── node_modules
└── test
    └── test.js

> mkdir -p assets/css assets/scripts test && touch assets/css/main.css assets/scripts/main.js test/test.js刺：

>將一些代碼添加到

（有意錯誤）：> update

>包括一根棉腳本：

main.js

>運行

"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();

來提起代碼。 糾正錯誤並重新運行以驗證。

package.json

測試（使用摩卡咖啡）：

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

>安裝摩卡咖啡：npm run lint -s

在中創建簡單的測試：

$ mkdir ~/buildtool && cd ~/buildtool
$ npm init

>將測試腳本添加到package.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"
}

>運行npm test -s。

hooks和post鉤子：

>

在測試前運行絨毛，添加pretest鉤子：

>

$ npm install jshint --save-dev

現在，npm test -s將首先運行柔軟的腳本。

代碼縮小：

install

和uglify-js：clean-css

├── assets
│   ├── css
│   │   └── main.css
│   └── scripts
│       └── main.js
├── dist
├── package.json
├── node_modules
└── test
    └── test.js

在

中創建Minification腳本：package.json

"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();

run

和npm run minify:js -s。 npm run minify:css -s

>觀看更改（使用

）：watch> > install

：

watch

添加手錶腳本：

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

>運行

npm install mocha --save-dev

以自動在文件更改上縮小。 >

npm run watch構建腳本：

>將腳本組合到一個腳本中：

build>運行

。

var assert = require("assert");
var Author = require("../assets/scripts/main.js").Author;

// ... (test code) ...

npm run build -s服務器腳本（使用

）：

> http-server> install：

http-server添加服務器腳本：

"scripts": {
  // ...
  "test": "echo '=> testing' && mocha test/"
}

>運行

。

"scripts": {
  // ...
  "pretest": "npm run lint -s"
}

npm run server結論：

NPM提供了專用構建工具的強大而靈活的替代方案。 在訴諸於更簡單的項目之前，請先考慮先使用NPM。 下面的常見問題解答提供了進一步的澄清。

（此處省略了原始輸入的其餘部分，包括常見問題解答，因為它主要是對上面已經解釋的概念的重複。 🎜>

以上是給Grunt靴子！使用NPM作為構建工具的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！