把咕噜赶走!使用npm作为构建工具的指南

前端构建和工作流工具有很多:咕哝着说，狼吞虎咽地吃，西兰花,杰克仅举几例。这些工具几乎可以自动化您在项目中重复做的任何事情，从缩小和连接源文件，到运行测试或编译代码。但问题是，你需要它们吗?您真的想在项目中引入额外的依赖项吗?答案是“不!”有一个免费的替代方案，可以为你做这些任务的大部分，它是捆绑的node . js．我说的当然是npm．

在本文中，我们将讨论什么npm能够作为构建工具。如果你想在开始之前快速入门npm，请参考我们的NPM初学者指南．如果你想跟着我，你可以找到本文在GitHub上使用的代码．

npm脚本

为了开始我们的讨论，我们将为我们的新演示项目创建一个目录，我们将其称为“buildtool”。完成后，我们将移动到这个文件夹，然后运行命令npm init要创建package.json文件:

＄mkdir~ / buildtool& &cd~ / buildtool美元npm初始化

你会被问到几个问题。的最终内容，请随意跳过它们的全部或部分package.json文件内容如下:

｛“名称”：“buildtool”，“版本”：“1.0.0”，“描述”：“npm作为构建工具”，“依赖”：｛｝，“devDependencies”：｛｝，“脚本”：｛“信息”：“将npm作为构建工具”｝，“作者”：“必威西盟体育网页登录SitePoint”，“许可证”：“ISC”｝

如你所见，我们有一个脚本对象的财产被称为信息．的价值信息将在shell中作为命令执行。我们可以看到一个列表脚本属性(也称为命令)和在项目中定义的值，通过运行命令:

＄npm运行

如果你在我们的项目文件夹中运行前面的命令，你应该会看到以下结果:

脚本可用在buildtool通过｀npm运行脚本｀：信息回声“npm作为构建工具”

如果你想要运行一个特定的属性，你可以运行命令:

＄npm运行<财产>

运行信息命令中定义的package.json文件中，我们要写:

＄npm运行信息

它将产生以下输出:

＄npm运行信息>buildtool@1.0.0 info /home/必威西盟体育网页登录sitepoint/buildtool>回声“npm作为构建工具”npm作为构建工具

如果你只想要的输出信息，你可以使用- s国旗的沉默NPM的输出：

＄npm执行info -s命令npm作为构建工具

我们只用了简单的回声到目前为止，但这是一个非常强大的功能。命令行上的所有内容我们都可以使用，在这里我们可以非常有创造性。因此，让我们在前面介绍的基础上进行安装包创建一些常见的工作流。

常见的工作流

我们想要实现的第一件事是JavaScript文件的检测功能。这包括运行一个程序来分析我们的代码以找出潜在的错误。我们要用JSHint为此，第一步是通过npm安装包:

＄npm安装jshint——save-dev

执行此命令后，您将看到一个名为node_modules．这是下载JSHint的地方。此外，我们还需要为我们的项目创建以下文件夹结构:

├──assets│├──CSS││├──main. css│├──script│├──main. js├──dist├──package. json├──node_modules├──test├──test. js

在Unix系统上，可以使用以下命令完成:

＄mkdir-p assets/css assets/scripts测验& &触摸Assets /css/main.css Assets /scripts/main.js test/test.js

产品毛羽

中强制出现一些语法错误main.js文件。目前该文件是空的，所以打开它并粘贴以下内容:

“使用严格的”；var作者＝新函数（的名字）｛这．的名字＝的名字||“匿名”；这．文章＝新数组（）；｝作者．原型．writeArticle＝函数（标题）｛这．文章．推（标题）；｝；作者．原型．listArticles＝函数（）｛返回这．的名字+“写过:”+这．文章．加入（”、“）；｝；出口．作者＝作者；var彼得＝新作者（“彼得”）；彼得．writeArticle（npm入门指南）；彼得．writeArticle（“使用npm作为构建工具”）；彼得．listArticles（）；

希望这段代码的意图是明确的-我们声明了一个构造函数，其目的是创建新的作者对象。我们还将两个方法附加到作者的原型属性，该属性允许我们存储和列出作者所写的文章。注意到出口语句，该语句将使我们的代码在定义它的模块之外可用。如果你有兴趣了解更多，请务必阅读:理解模块。出口而且出口在node . js．

接下来，我们要添加a财产对我们的脚本对象package.json这会触发jshint．为此，我们将创建一个线头属性如下:

“脚本”：｛“信息”：“将npm作为构建工具”，“棉絮”："echo '=> linting' && jshint assets/scripts/*.js"｝

这里我们利用了& &操作符将命令和文件glob(星号)连接起来，该操作符被视为通配符，在本例中匹配带有. js结束于脚本目录中。

请注意: Windows命令行不支持glob，但是当给出一个命令行参数时，例如* . js， Windows将其逐字传递给调用应用程序。这意味着供应商可以安装兼容性库来提供类似Windows glob的功能。JSHint使用minimatch库用于此目的。

现在让我们lint代码:

npm运行lint -s

这将产生以下输出:

＝>Linting assets/scripts/main.js: line1,卡扎菲1，使用函数形式的“使用严格的”．资产/脚本/ main.js:行5,卡扎菲28数组文字表示法［］是更可取的。资产/脚本/ main.js:行3.,卡扎菲14，奇怪的结构。是“新”有必要吗?资产/脚本/ main.js:行6,卡扎菲1,错过“()”调用构造函数。资产/脚本/ main.js:行6,卡扎菲2，缺少分号。资产/脚本/ main.js:行16,卡扎菲1，“出口”没有定义。6错误

它的工作原理。让我们清理这些错误，重新运行linter以确保，然后继续进行一些测试:

（函数（）｛“使用严格的”；var作者＝函数（的名字）｛这．的名字＝的名字||“匿名”；这．文章＝［］；｝；作者．原型．writeArticle＝函数（标题）｛这．文章．推（标题）；｝；作者．原型．listArticles＝函数（）｛返回这．的名字+“写过:”+这．文章．加入（”、“）；｝；出口．作者＝作者；var彼得＝新作者（“彼得”）；彼得．writeArticle（npm入门指南）；彼得．writeArticle（“使用npm作为构建工具”）；彼得．listArticles（）；｝）（）；

注意我们是如何将所有内容都包装在立即调用的函数表达式．

npm运行lint -s＝>产品毛羽

没有错误。我们很好!

测试

首先，我们需要安装深咖啡色的包．Mocha是一个简单而灵活的用于Node.js和浏览器的JavaScript测试框架。如果你想了解更多，这篇文章是一个很好的开始:基本前端测试与摩卡和柴

npm安装摩卡,save-dev

接下来，我们将创建一些简单的测试来测试我们之前编写的方法。打开. js并添加以下内容(请注意需要语句使我们的代码可用于mocha):

var断言＝需要（“维护”）；var作者＝需要（“. . /资产/脚本/ main.js”）．作者；描述（“作者”，函数（）｛描述（“构造函数”，函数（）｛它（"应该有一个默认名称"，函数（）｛var作者＝新作者（）；断言．平等的（“匿名”，作者．的名字）；｝）；｝）；描述（“# writeArticle”，函数（）｛它（“应储存物品”，函数（）｛var作者＝新作者（）；断言．平等的（0，作者．文章．长度）；作者．writeArticle（“测试中”）；断言．平等的（1，作者．文章．长度）；｝）；｝）；描述（“# listArticles”，函数（）｛它（“应该列出文章”，函数（）｛var作者＝新作者（“吉姆”）；作者．writeArticle（“一篇好文章”）；断言．平等的（"吉姆写了一篇很棒的文章"，作者．listArticles（））；｝）；｝）；｝）；

现在加入a测验任务package.json：

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

NPM有几个方便的捷径，即npm测试，npm开始而且npm停止．这些都是他们的别名运行等价物，也就是说我们只需要跑npm测试如何让摩卡发挥作用:

＄npm测验- s＝>Author构造函数✓应该有一个默认名称# writeArticle应该存放物品# listArticles应该列出文章3.通过（5女士）

前后钩

如果我们要运行我们的测试套件，它会因为语法错误而直接退出，这将不是非常有效的。幸运的是npm给了我们精准医疗而且帖子胡克斯，所以如果你跑NPM运行测试它会首先执行NPM运行预测试而且NPM运行后测试当它结束的时候。在本例中，我们要运行线头脚本。测验脚本。以下预备考试脚本使这成为可能。

“脚本”：｛“信息”：“将npm作为构建工具”，“棉絮”："echo '=> linting' && jshint assets/scripts/*.js"，“测试”："echo '=> testing' && mocha test/"，“预备考试”："npm run lint -s"｝

假设我们之前没有纠正脚本中的语法错误。在这种情况下，上面的预备考试脚本将失败，退出代码为非零测验脚本无法运行。这正是我们想要的行为。

＄npm测验- s＝>Linting assets/scripts/main.js: line1,卡扎菲1，使用函数形式的“使用严格的”．．．．6错误

输入正确的代码main.js：

＝>产品毛羽＝>Author构造函数✓应该有一个默认名称# writeArticle应该存放物品# listArticles应该列出文章3.通过（6 ms）

我们是绿色的!

代码缩小

对于这个部分，我们需要添加一个经销目录到我们的项目，以及几个子目录和文件。这是文件夹结构的外观:

├──dist│├──公共│├──CSS│├──指数.html│├──js

在Unix机器上重新创建的命令是:

mkdir-p dist/public/css dist/public/js . p& &触摸dist /公共/ index . html

的内容index . html很简单。

<！文档类型超文本标记语言><超文本标记语言><头><元字符集＝＂utf - 8＂/><标题>NPM作为构建工具标题><链接href＝＇css / main.min.css＇rel＝＇样式表＇>头><身体><h2>NPM作为构建工具h2><脚本src＝＇js / main.min.js＇>脚本>身体>超文本标记语言>

目前main.js不是最小化的。这是应该的，因为这是我们正在处理的文件，我们需要能够读取它。但是，在我们将其上传到活动服务器之前，我们需要减小其大小并将其放在dist /公共/ js目录中。为此，我们可以安装uglify-js包并创建一个新脚本。

＄npm安装uglify-js——save-dev

现在我们可以创建一个新的使变小:js脚本package.json：

“脚本”：｛“信息”：“将npm作为构建工具”，“棉絮”："echo '=> linting' && jshint assets/scripts/*.js"，“测试”："echo '=> testing' && mocha test/"，“贬低:js”："echo '=> minify:js' && uglifyjs assets/scripts/main.js -o dist/public/js/main.min.js"，“预备考试”："npm run lint -s"｝

运行该程序:

＄npm执行minify:js -s命令＝>使变小:js

该脚本在正确的目标中创建文件的缩小版本。方法对CSS文件执行相同的操作css包．

＄npm安装css——save-dev

并创建使变小:css脚本。

“脚本”：｛“信息”：“将npm作为构建工具”，“棉絮”："echo '=> linting' && jshint assets/scripts/*.js"，“测试”："echo '=> testing' && mocha test/"，“贬低:js”："echo '=> minify:js' && uglifyjs assets/scripts/main.js -o dist/public/js/main.min.js"，“贬低:css”："echo '=> minify:css' &&清除assets/css/main.css -o dist/public/css/main.min.css"，“预备考试”："npm run lint -s"｝

让我们运行脚本。

＄npm执行minify:css -s命令＝>使变小:css

观察变化

Grunt, Gulp和他们的同类最擅长的一件事就是观察一组文件，并在检测到其中一个文件发生变化时重新运行特定的任务。这在这种情况下特别有用，因为手动重新运行缩小脚本会非常麻烦。

好消息是，你也可以在npm中这样做，使用包看，其目的是使管理文件和目录树的监视更容易。

＄npm安装看——save-dev

然后是包装。Json中，您需要指定在检测到更改时要运行的任务。在这种情况下，JavaScript和CSS缩小:

“脚本”：｛.．.“看”："watch 'npm run minify:js && npm run minify:css' assets/scripts/ assets/css/"｝

使用以下命令启动脚本:

＄npm运行看

现在，只要有任何文件资产/脚本/或资产/ css /更改后，缩小脚本将被自动调用。

构建脚本

到目前为止，我们已经有了几个脚本，我们可以将它们链接在一起来创建一个构建脚本应该做以下:检测，测试和缩小。毕竟，必须一次又一次地单独运行这些任务是一件痛苦的事情。要创建此构建脚本，请更改中的脚本对象package.json,因此:

“脚本”：｛“信息”：“将npm作为构建工具”，“棉絮”："echo '=> linting' && jshint assets/scripts/*.js"，“测试”："echo '=> testing' && mocha test/"，“贬低:js”："echo '=> minify:js' && uglifyjs assets/scripts/main.js -o dist/public/js/jquery.min.js"，“贬低:css”："echo '=> minify:css' &&清除assets/css/main.css -o dist/public/css/main.min.css"，“构建”："echo '=> building' && NPM run test -s && NPM run minify:js -s && NPM run minify:css -s"，“预备考试”："npm run lint -s"｝

运行构建脚本提供了以下输出。

＄npm运行build -s＝>建筑＝>产品毛羽＝>Author构造函数✓应该有一个默认名称# writeArticle应该存放物品# listArticles应该列出文章3.通过（6 ms）＝>使变小:js＝>使变小:css

服务器脚本

在我们运行构建脚本，这将是很好的，如果我们可以开始为我们的内容在服务器经销然后在浏览器中检查。我们可以用http服务器包．

＄npm安装http服务器-save-dev

我们做了一个服务器脚本。

“脚本”：｛.．.“服务器”：“http服务器dist /公共/”，｝

现在我们可以运行我们的服务器。

启动http-server，服务dist/public/在http://0.0.0.0:8080按CTRL-C停止服务器_

当然服务器脚本可以添加到构建脚本，但我把它作为练习留给读者。

结论

希望本文已经展示了npm作为构建工具是多么灵活和强大。下次你开始一个新项目时，尽量不要直接使用Gulp或Grunt这样的工具——尽量只使用npm来解决你的需求。你可能会感到惊喜。

如果你有任何问题或意见，我很高兴在下面的帖子中听到它们。