给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中文网其他相关文章！