>存在許多前端構建和工作流程工具，包括咕unt，吞噬，西蘭花和傑克。 這些工具可自動化重複的項目任務，例如縮小，串聯，測試和代碼彙編。但是，添加另一個依賴性可能是不必要的。 NPM內置的Node.js替代方案有效地處理了許多這些任務。本文探討了NPM作為構建工具的功能。 對於NPM初學者，請諮詢我們的入門指南。代碼示例可在GitHub上找到。
>>>使用NPM作為構建工具的關鍵優點：
package.json
創建一個項目目錄（“ 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"
}標誌靜音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刺：
（有意錯誤）：
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();和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結論：
（此處省略了原始輸入的其餘部分，包括常見問題解答，因為它主要是對上面已經解釋的概念的重複。 🎜>
以上是給Grunt靴子！使用NPM作為構建工具的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
