gulp 和npm

I know what you’re thinking. WAT?! Didn’t Gulp just kill Grunt? Why can’t we just be content for a few minutes here in JavaScript land? I hear ya, but…

我知道你在想什么 WAT ？！ 古爾普不是殺死了咕unt嗎？ 為什么我們不能只在JavaScript領(lǐng)域呆上幾分鐘呢？ 我聽(tīng)到了，但是…

I’ve found Gulp and Grunt to be unnecessary abstractions. npm scripts are plenty powerful and often easier to live with.我發(fā)現(xiàn)Gulp和Grunt是不必要的抽象。 npm腳本功能強(qiáng)大，通常更易于使用。

讓我們從一個(gè)例子開(kāi)始... (Let’s Begin With An Example…)

I was a big fan of Gulp. But on my last project, I ended up with 100’s of lines in my gulpfile and around a dozen Gulp plugins. I was struggling to integrate Webpack, Browsersync, hot reloading, Mocha and much more using Gulp. Why? Well, some plugins had insufficient documentation for my use case. Some plugins only exposed part of the API I needed. One had an odd bug where it would only watch a small number of files. Another stripped colors when outputting to the command line.

我是Gulp的忠實(shí)粉絲。 但是在我的上一個(gè)項(xiàng)目中，我最終在gulpfile中添加了100行代碼，并使用了大約12個(gè)Gulp插件。 我正在努力使用Gulp集成Webpack，Browsersync，熱重裝，Mocha以及更多功能。 為什么？ 好吧，有些插件沒(méi)有針對(duì)我的用例的文檔。 一些插件僅公開(kāi)了我需要的API的一部分。 一個(gè)人有一個(gè)奇怪的錯(cuò)誤，即它只能觀看少量文件。 當(dāng)輸出到命令行時(shí)，另一種顏色被剝離。

These are solvable problems, but none of these issues occurred when I called the tools directly.

這些是可解決的問(wèn)題，但是當(dāng)我直接調(diào)用工具時(shí)，這些問(wèn)題都沒(méi)有發(fā)生。

Lately I’ve noticed many open-source projects are simply using npm scripts. I decided to step back and re-examine. Did I really need Gulp? It turns out I didn’t.

最近，我注意到許多開(kāi)源項(xiàng)目都只是使用npm腳本。 我決定退后一步，重新檢查。 我真的需要Gulp嗎？ 原來(lái)我沒(méi)有。

I decided to try using just npm scripts on my new open source project. I created a rich dev environment and build process for React applications using just npm scripts. Curious what this looks like? Check out React Slingshot. I walk through how to create this build process using npm scripts in “Building a JavaScript Development Environment” on Pluralsight.

我決定嘗試在新的開(kāi)源項(xiàng)目中僅使用npm腳本。 我僅使用npm腳本創(chuàng)建了一個(gè)豐富的開(kāi)發(fā)環(huán)境并為React應(yīng)用程序構(gòu)建過(guò)程。 好奇這是什么樣子？ 查看React Slingshot 。 我將在Pluralsight上的“ 構(gòu)建JavaScript開(kāi)發(fā)環(huán)境 ”中逐步介紹如何使用npm腳本創(chuàng)建此構(gòu)建過(guò)程。

The surprising thing is, I now prefer working with npm scripts over Gulp. Here’s why.

令人驚訝的是，與Gulp相比，我現(xiàn)在更喜歡使用npm腳本。 這就是為什么。

Gulp和Grunt有什么問(wèn)題？ (What’s Wrong with Gulp and Grunt?)

Over time, I’ve noticed three core issues with task runners like Gulp and Grunt:

隨著時(shí)間的流逝，我已經(jīng)注意到任務(wù)執(zhí)行者(例如Gulp和Grunt)的三個(gè)核心問(wèn)題：

Dependence on plugin authors

對(duì)插件作者的依賴

Frustrating debugging

令人沮喪的調(diào)試

Disjointed documentation

脫節(jié)的文件

Let’s consider each of these issues.

讓我們考慮所有這些問(wèn)題。

問(wèn)題1：對(duì)插件作者的依賴 (Issue 1: Dependence on Plugin Authors)

When you’re working with new or unpopular technologies, no plugin may exist at all. And when a plugin exists, it may be outdated. For example, Babel 6 was recently released. The API changed significantly, so many Gulp plugins were incompatible with the latest version. When using Gulp, I was stuck because the Gulp plugin I needed wasn’t updated yet.

當(dāng)您使用新技術(shù)或不受歡迎的技術(shù)時(shí)，可能根本不存在任何插件。 并且當(dāng)插件存在時(shí)，它可能已過(guò)時(shí)。 例如，Babel 6是最近發(fā)布的。 API發(fā)生了重大變化，因此許多Gulp插件與最新版本不兼容。 使用Gulp時(shí)，我陷入了困境，因?yàn)樗璧腉ulp插件尚未更新。

With Gulp or Grunt, you must wait for plugin maintainers to provide updates, or fix it yourself. This delays your ability to utilize new versions of modern tools. In contrast, when I use npm scripts, I consume tools directly without an extra layer of abstraction. This means when new versions of Mocha, Istanbul, Babel, Webpack, Browserify and so on are released, I’m able to utilize the new versions immediately.

使用Gulp或Grunt，您必須等待插件維護(hù)者提供更新或自行修復(fù)。 這會(huì)延遲您使用現(xiàn)代工具的新版本的能力。 相反， 當(dāng)我使用npm腳本時(shí)，無(wú)需使用額外的抽象層即可直接使用工具 。 這意味著當(dāng)發(fā)布新版本的Mocha，Istanbul，Babel，Webpack，Browserify等時(shí)，我能夠立即使用這些新版本。

In terms of selection, nothing beats npm:

在選擇方面，npm勝過(guò)一切：

When you use npm scripts, you don’t search for a Grunt or Gulp plugin. You choose from over 227,000 npm packages.

使用npm腳本時(shí)，無(wú)需搜索Grunt或Gulp插件。 您可以從超過(guò)227,000個(gè)npm軟件包中進(jìn)行選擇。

To be fair, if the Grunt or Gulp plugin you need isn’t available, you can certainly utilize npm packages directly. But then you’re no longer leveraging Gulp or Grunt for that specific task.

公平地說(shuō)，如果您需要的Grunt或Gulp插件不可用，您當(dāng)然可以直接使用npm軟件包。 但是，您不再需要利用Gulp或Grunt來(lái)完成特定任務(wù)。

問(wèn)題2：令人沮喪的調(diào)試 (Issue 2: Frustrating Debugging)

As integrations fail, debugging in Grunt and Gulp can be frustrating. Since you’re working with an extra layer of abstraction, there are more potential causes for any bug:

由于集成失敗，在Grunt和Gulp中進(jìn)行調(diào)試可能會(huì)令人沮喪。 由于您正在使用額外的抽象層，因此，存在更多可能導(dǎo)致任何錯(cuò)誤的原因：

Is the base tool broken?

基本工具是否損壞？

Is the Grunt/Gulp plugin broken?

Grunt / Gulp插件是否損壞？

Is my configuration broken?

我的配置壞了嗎？

Am I using incompatible versions?

我使用的版本不兼容嗎？

Using npm scripts eliminates #2. And I find #3 is far less common since I typically call the tool’s command line interface directly. Finally, #4 is less common since I’ve reduced the number of packages in my project by utilizing npm directly instead of using a task runner’s abstraction.

使用npm腳本消除了＃2。 而且我發(fā)現(xiàn)＃3不太常見(jiàn)，因?yàn)槲彝ǔＶ苯诱{(diào)用該工具的命令行界面。 最后，＃4不太常見(jiàn)，因?yàn)槲彝ㄟ^(guò)直接利用npm而不是使用任務(wù)運(yùn)行程序的抽象來(lái)減少項(xiàng)目中的軟件包數(shù)量。

問(wèn)題3：脫節(jié)的文檔 (Issue 3: Disjointed Documentation)

The documentation for the core tools I need is nearly always better than the associated Grunt and Gulp plugins. For example, if I use gulp-eslint, I end up splitting my time between the gulp-eslint docs and the ESLint website. I have to switch context between the plugin and the tool it is abstracting. The core piece of friction in Gulp and Grunt is this:

我所需的核心工具的文檔幾乎總是比相關(guān)的Grunt和Gulp插件更好。 例如，如果我使用gulp-eslint，最終我會(huì)在gulp-eslint文檔和ESLint網(wǎng)站之間分配時(shí)間。 我必須在插件和正在抽象的工具之間切換上下文。 Gulp和Grunt的核心摩擦是：

Understanding the tool isn’t enough. Gulp and Grunt require you to understand the plugin’s abstraction.

僅僅了解該工具還不夠。 Gulp和Grunt要求您了解插件的抽象。

Most build-related tools offer clear, powerful, and well-documented command line interfaces. See the docs on ESLint’s CLI as a good example. I find reading and implementing a short command line call in npm scripts clearer, lower friction, and easier to debug (since there’s a layer of abstraction removed).

大多數(shù)與構(gòu)建相關(guān)的工具都提供清晰，功能強(qiáng)大且有據(jù)可查的命令行界面。 請(qǐng)參閱ESLint CLI上的文檔作為一個(gè)很好的示例。 我發(fā)現(xiàn)在npm腳本中閱讀和實(shí)現(xiàn)簡(jiǎn)短的命令行調(diào)用更加清晰，摩擦更少，更易于調(diào)試(因?yàn)橐褎h除了抽象層)。

Now that I’ve established the pain points, the question is, why do we think we need task runners like Gulp and Grunt?

現(xiàn)在，我已經(jīng)確定了痛點(diǎn)，問(wèn)題是，為什么我們認(rèn)為我們需要像Gulp和Grunt這樣的任務(wù)賽跑者？

為什么我們忽略了npm的構(gòu)建？ (Why Have We Ignored npm for builds?)

I believe there are four core misconceptions that led to Gulp and Grunt becoming so popular:

我相信有四個(gè)核心誤解導(dǎo)致Gulp和Grunt如此流行：

People think npm scripts require strong command line skills

人們認(rèn)為npm腳本需要強(qiáng)大的命令行技能

People think npm scripts aren’t powerful enough

人們認(rèn)為npm腳本不夠強(qiáng)大

People think Gulp’s streams are necessary for fast builds

人們認(rèn)為Gulp的流對(duì)于快速構(gòu)建是必要的

People think npm scripts don’t run cross platform

人們認(rèn)為npm腳本不能跨平臺(tái)運(yùn)行

Let’s address these misconceptions in order.

讓我們按順序解決這些誤解。

誤解1 ： npm腳本需要強(qiáng)大的命令行技能 (Misconception 1: npm Scripts Require Strong Command-Line Skills)

You don’t have to know much about your operating system’s command line to enjoy the power of npm scripts. Sure, grep, sed, awk, and pipes are lifelong skills worth learning, but you don’t have to be a Unix or Windows command line wizard to use npm scripts. You can leverage the 1000’s of packages in npm to get the job done instead.

您無(wú)需對(duì)操作系統(tǒng)的命令行了解太多，就可以享受npm腳本的強(qiáng)大功能。 當(dāng)然， grep，sed，awk和管道是一生值得學(xué)習(xí)的技能，但是您不必是Unix或Windows命令行向?qū)Ъ纯墒褂胣pm腳本 。 您可以在npm中利用1000個(gè)軟件包來(lái)完成工作。

For instance, you might not know that in Unix this forcefully deletes a directory: rm -rf. That’s okay. You can use rimraf which does the same thing (and it works cross-platform to boot). Most npm packages offer interfaces that assume very little knowledge of your OS’s command line. Just search npm for packages that do what you need, read the docs, learn as you go. I used to search for Gulp plugins. Now I search for npm packages instead. A great resource: libraries.io.

例如，您可能不知道在Unix中這會(huì)強(qiáng)制刪除目錄：rm -rf。 沒(méi)關(guān)系。 您可以使用rimraf來(lái)做同樣的事情(它可以跨平臺(tái)啟動(dòng))。 大多數(shù)npm軟件包提供的界面假定您對(duì)操作系統(tǒng)的命令行了解很少。 只需在npm中搜索可以滿足您需求的軟件包，閱讀文檔，邊走邊學(xué)。 我曾經(jīng)搜索Gulp插件。 現(xiàn)在，我搜索npm軟件包。 很棒的資源： libraries.io 。

誤解2：npm腳本不夠強(qiáng)大 (Misconception #2: npm Scripts Aren’t Powerful Enough)

npm scripts are surprisingly powerful on their own. There are convention-based pre and post hooks:

npm腳本本身具有強(qiáng)大的功能。 有基于約定的pre和post掛鉤 ：

{"name": "npm-scripts-example","version": "1.0.0","description": "npm scripts example","scripts": {"prebuild": "echo I run before the build script","build": "cross-env NODE_ENV=production webpack","postbuild": "echo I run after the build script"} }

All you do is follow convention. The scripts above will run in order based on their prefix. The prebuild script will run before the build script because it has the same name, but is prefixed with “pre”. The postbuild script will run after the build script because it has the prefix of “post”. So if I create scripts named prebuild, build, and postbuild, they’ll run automatically in that order when I type `npm run build`.

您要做的就是遵循慣例。 上面的腳本將根據(jù)其前綴按順序運(yùn)行。 預(yù)構(gòu)建腳本將在構(gòu)建腳本之前運(yùn)行，因?yàn)樗哂邢嗤拿Q(chēng)，但前綴為“ pre”。 postbuild腳本將在構(gòu)建腳本之后運(yùn)行，因?yàn)樗那熬Y為“ post”。 因此，如果我創(chuàng)建名為prebuild，build和postbuild的腳本，那么當(dāng)我輸入`npm run build`時(shí)，它們將按照該順序自動(dòng)運(yùn)行。

You can also decompose big problems by calling one script from another:

您還可以通過(guò)從另一個(gè)腳本中調(diào)用一個(gè)腳本來(lái)分解大問(wèn)題：

{"name": "npm-scripts-example","version": "1.0.0","description": "npm scripts example","scripts": {"clean": "rimraf ./dist && mkdir dist","prebuild": "npm run clean","build": "cross-env NODE_ENV=production webpack"} }

In this example the prebuild task calls the clean task. This allows you to decompose your scripts into small, well-named, single responsibility, one-liners.

在此示例中，預(yù)構(gòu)建任務(wù)將調(diào)用clean任務(wù)。 這使您可以將腳本分解為名稱(chēng)明確的單一職責(zé)的一小部分代碼。

You can call multiple scripts serially on a single line using &&. The scripts in the clean step above will run one after the other. This simplicity will really make you smile if you’re someone who has struggled with getting a list of tasks to run in order in Gulp.

您可以使用&&在一行上依次調(diào)用多個(gè)腳本。 上面干凈步驟中的腳本將一個(gè)接一個(gè)地運(yùn)行。 如果您一直在努力讓任務(wù)列表按順序在Gulp中運(yùn)行，那么這種簡(jiǎn)單性將使您微笑。

And if a command gets too complicated, you can always call a separate file:

而且，如果命令變得太復(fù)雜，則始終可以調(diào)用一個(gè)單獨(dú)的文件：

{"name": "npm-scripts-example","version": "1.0.0","description": "npm scripts example","scripts": {"build": "node build.js"} }

I’m calling a separate script in the build task above. That script will be run by Node and thus can utilize any npm packages I need, and utilize all the power of JavaScript inside.

我在上面的構(gòu)建任務(wù)中調(diào)用了一個(gè)單獨(dú)的腳本。 該腳本將由Node運(yùn)行，因此可以利用我需要的任何npm軟件包，并利用內(nèi)部JavaScript的所有功能。

I could go on, but the core features are documented here. Also, there’s also a short Pluralsight course on using npm as a build tool. Or, check out React Slingshot for an example of all this in action.

我可以繼續(xù)，但是這里記錄了核心功能 。 另外，還將有一個(gè)簡(jiǎn)短的Pluralsight課程，介紹如何使用npm作為構(gòu)建工具 。 或者，查看React Slingshot以獲取所有這些示例的示例。

誤解3：快速構(gòu)建需要Gulp的流 (Misconception 3: Gulp’s Streams Are Necessary for Fast Builds)

Gulp quickly gained traction over Grunt because Gulp’s in-memory streams are faster than Grunt’s file-based approach. But you don’t need Gulp to enjoy the power of streaming. In fact, streaming has always been built into both Unix and Windows command lines. The pipe (|) operator streams the output of one command to the input of another command. And the redirection (>) operator redirects output to a file.

Gulp很快就吸引了Grunt，因?yàn)镚ulp的內(nèi)存中流比Grunt的基于文件的方法要快。 但是您不需要Gulp來(lái)享受流媒體的力量。 實(shí)際上， 流傳輸始終內(nèi)置在Unix和Windows命令行中 。 管道(|)運(yùn)算符將一個(gè)命令的輸出流式傳輸?shù)搅硪幻畹妮斎搿?重定向(>)運(yùn)算符會(huì)將輸出重定向到文件。

So, for example, in Unix I can use `grep` the contents of a file and redirect the output to a new file:

因此，例如，在Unix中，我可以使用`grep`文件的內(nèi)容并將輸出重定向到新文件：

grep ‘Cory House’ bigFile.txt > linesThatHaveMyName.txt

The work above is streamed. No intermediate files are written. (Wondering how to do the command above in a cross-platform way? Read on…)

以上工作已流式傳輸。 沒(méi)有寫(xiě)入中間文件。 (想知道如何以跨平臺(tái)方式執(zhí)行上面的命令嗎？請(qǐng)繼續(xù)閱讀...)

You can also use the `&` operator to run two commands at the same time on Unix:

您也可以在Unix上使用`＆`運(yùn)算符同時(shí)運(yùn)行兩個(gè)命令：

npm run script1.js & npm run script2.js

The two scripts above will run in at the same time. To run scripts concurrently cross platform, use npm-run-all. This leads to the next misconception…

上面的兩個(gè)腳本將同時(shí)運(yùn)行。 要跨平臺(tái)同時(shí)運(yùn)行腳本，請(qǐng)使用npm-run-all 。 這導(dǎo)致了下一個(gè)誤解……

誤解4：npm腳本不能跨平臺(tái)運(yùn)行 (Misconception 4: npm Scripts Don’t Run Cross-platform)

Many projects are tied to a specific operating system, so cross-platform concerns don’t matter. But if you need to run cross-platform, npm scripts can still work great. Countless open source projects are proof. Here’s how.

許多項(xiàng)目都與特定的操作系統(tǒng)相關(guān)聯(lián)，因此跨平臺(tái)的關(guān)注無(wú)關(guān)緊要。 但是，如果您需要運(yùn)行跨平臺(tái)，npm腳本仍然可以很好地工作。 無(wú)數(shù)開(kāi)源項(xiàng)目就是證明。 這是如何做。

Your operating system’s command line runs your npm scripts. So on Linux and OSX, your npm scripts run on a Unix command line. On Windows, npm scripts run on the Windows command line. Thus, if you want your build scripts to run on all platforms, you need to make both Unix and Windows happy. Here are three approaches:

操作系統(tǒng)的命令行運(yùn)行npm腳本。 因此，在Linux和OSX上，您的npm腳本在Unix命令行上運(yùn)行。 在Windows上，npm腳本在Windows命令行上運(yùn)行。 因此，如果要使構(gòu)建腳本在所有平臺(tái)上運(yùn)行，則需要使Unix和Windows都滿意。 這是三種方法：

Approach 1: Use commands that run cross-platform. There’s a surprising number of cross-platform commands. Here’s a few:

方法1：使用跨平臺(tái)運(yùn)行的命令 。 跨平臺(tái)命令數(shù)量驚人。 這里有一些：

&& chain tasks (Run one task after another) < input file contents to a command > redirect command output to a file | redirect command output to another command

Approach 2: Use node packages. You can use node packages instead of shell commands. For instance, use rimraf instead of `rm -rf`. Use cross-env to set environment variables in a cross-platform way. Search Google, npm or libraries.io for what you want to do and there is almost certainly a node package that will get it done cross-platform. And if your command line calls get too long, you can call Node packages in separate scripts as well like this:

方法2：使用節(jié)點(diǎn)包。 您可以使用節(jié)點(diǎn)包而不是shell命令。 例如，使用rimraf而不是`rm -rf`。 使用cross-env以跨平臺(tái)的方式設(shè)置環(huán)境變量。 在Google，npm或libraries.io中搜索您想做什么，幾乎可以肯定有一個(gè)節(jié)點(diǎn)程序包可以跨平臺(tái)完成它。 而且，如果您的命令行調(diào)用太長(zhǎng)，則可以在單獨(dú)的腳本中調(diào)用Node程序包，如下所示：

node scriptName.js

The script above is plain old JavaScript, run by Node. And since you’re just calling a script on the command line, you’re not limited to .js files. You can run any script that your OS can execute such as Bash, Python, Ruby, or Powershell as well.

上面的腳本是由Node運(yùn)行的普通JavaScript。 而且，由于您只是在命令行上調(diào)用腳本，因此您不僅限于.js文件。 您也可以運(yùn)行OS可以執(zhí)行的任何腳本，例如Bash，Python，Ruby或Powershell。

Approach 3: Use ShellJS. ShellJS is an npm package that runs Unix commands via Node. So this gives you the power to run Unix commands on all platforms, including Windows.

方法3 ：使用ShellJS 。 ShellJS是一個(gè)npm軟件包，可通過(guò)Node運(yùn)行Unix命令。 因此，這使您能夠在包括Windows在內(nèi)的所有平臺(tái)上運(yùn)行Unix命令。

I used a combination of approach #1 and #2 on React Slingshot.

我在React Slingshot上結(jié)合了方法1和方法2。

痛點(diǎn) (Pain Point)

There are admittedly some downsides: The JSON spec doesn’t support comments, so you can’t add comments in package.json. There are a few ways to work around this limitation:

誠(chéng)然有一些缺點(diǎn)：JSON規(guī)范不支持注釋，因此您不能在package.json中添加注釋。 有幾種方法可以解決此限制：

Write small, well-named, single purpose scripts

編寫(xiě)小型的，名字明確的，單一目的的腳本

Document scripts separately (in a README.md for instance)

單獨(dú)編寫(xiě)文檔腳本(例如在README.md中)

Call a separate .js file

調(diào)用一個(gè)單獨(dú)的.js文件

I prefer option #1. If you break each script down to have a single responsibility, comments are rarely necessary. The script’s name should fully describe the intent, just like any small well-named function. As I discuss in “Clean Code: Writing Code for Humans”, small single responsibility functions rarely require comments. When I feel a comment is necessary, I use option #3 and move the script to a separate file. This gives me all the compositional power of JavaScript when I need it.

我更喜歡選擇＃1。 如果將每個(gè)腳本分解為一個(gè)職責(zé)，則很少需要注釋。 腳本的名稱(chēng)應(yīng)充分描述其意圖，就像任何小的命名函數(shù)一樣。 正如我在“ 簡(jiǎn)潔代碼：編寫(xiě)人類(lèi)代碼 ”中所討論的那樣，小的單一職責(zé)功能很少需要注釋。 當(dāng)我覺(jué)得有必要發(fā)表評(píng)論時(shí)，我使用選項(xiàng)＃3并將腳本移到單獨(dú)的文件中。 這在需要時(shí)為我提供了JavaScript的全部組合功能。

Package.json also doesn’t support variables. This sounds like a big deal, but it’s not for two reasons. First, the most common need for variables revolves around environment, which you can set on the command line. Second, if you need variables for other reasons, you can call a separate .js file. Check out React-starter-kit for an elegant example of this pattern.

Package.json也不支持變量。 這聽(tīng)起來(lái)很重要，但這并不是出于兩個(gè)原因。 首先，最常見(jiàn)的變量需求圍繞環(huán)境，您可以在命令行上進(jìn)行設(shè)置。 其次，如果由于其他原因需要變量，則可以調(diào)用一個(gè)單獨(dú)的.js文件。 查看React-starter-kit以獲得該模式的優(yōu)雅示例。

Finally, there’s also a risk of creating long, complex command line arguments that are difficult to understand. Code reviews and diligent refactoring are a great way to assure npm scripts are decomposed into small, well-named, single purpose functions that everyone understands. If it’s complex enough to need a comment, you should likely refactor the single script into multiple well named scripts or extract it to a separate file.

最后，還有創(chuàng)建難以理解的長(zhǎng)而復(fù)雜的命令行參數(shù)的風(fēng)險(xiǎn)。 代碼審查和勤奮的重構(gòu)是確保npm腳本被分解為每個(gè)人都可以理解的小型，有名字的，單一目的的功能的好方法。 如果復(fù)雜到需要注釋的程度，您應(yīng)該將單個(gè)腳本重構(gòu)為多個(gè)命名良好的腳本，或者將其提取到單獨(dú)的文件中。

抽象必須合理 (Abstractions Must Be Justified)

Gulp and Grunt are abstractions over the tools I use. Abstractions are useful, but abstractions have a cost. They leak. They make us dependent upon the plugin maintainers and their documentation. And they add complexity by increasing the number of dependencies. I’ve decided task runners like Gulp and Grunt are abstractions I no longer need.

Gulp和Grunt是我使用的工具的抽象。 抽象是有用的，但是抽象是有代價(jià)的。 他們泄漏。 它們使我們依賴于插件維護(hù)者及其文檔。 并且它們通過(guò)增加依賴性數(shù)量而增加了復(fù)雜性。 我已經(jīng)確定像Gulp和Grunt這樣的任務(wù)運(yùn)行者是我不再需要的抽象。

Looking for details? I walk through how to create a build process using npm scripts from scratch in “Building a JavaScript Development Environment” on Pluralsight.

尋找細(xì)節(jié)？ 我將在Pluralsight上的“ 構(gòu)建JavaScript開(kāi)發(fā)環(huán)境 ”中逐步介紹如何使用npm腳本創(chuàng)建構(gòu)建過(guò)程。

Comments? Chime in below or on Reddit or Hacker News.

注釋？ 在Reddit或Hacker News下方或上方發(fā)出提示音 。

Finally, I’m far from the first person to suggest this. Here are some excellent links:

最后，我離提出這個(gè)建議的第一個(gè)人還很遠(yuǎn)。 這里有一些很好的鏈接：

• Task automation with npm run — James Holliday

  使用npm run實(shí)現(xiàn)任務(wù)自動(dòng)化 — James Holliday

• Advanced front-end automation with npm scripts — Kate Hudson

  帶有npm腳本的高級(jí)前端自動(dòng)化 — Kate Hudson

• How to use npm as a build tool — Kieth Cirkel

  如何使用npm作為構(gòu)建工具 — Kieth Cirkel

• Introduction to npm as a Build Tool — Marcus Hammarberg

  npm作為構(gòu)建工具簡(jiǎn)介 — Marcus Hammarberg

• Gulp is awesome, but do we really need it? — Gonto

  Gulp很棒，但是我們真的需要嗎？ —貢托

• NPM Scripts for Build Tooling — Andrew Burgess

  用于構(gòu)建工具的NPM腳本-Andrew Burgess

Cory House is the author of “React and Redux in ES6”, “Clean Code: Writing Code for Humans” and multiple other courses on Pluralsight. He is a Software Architect at VinSolutions and trains software developers internationally on software practices like front-end development and clean coding. Cory is a Microsoft MVP, Telerik Developer Expert, and founder of outlierdeveloper.com.

Cory House是“ ES6中的React和Redux ”，“ 純凈代碼：人類(lèi)編寫(xiě)代碼 ”以及其他有關(guān)Pluralsight的課程的作者 。 他是VinSolutions的軟件架構(gòu)師，并就前端開(kāi)發(fā)和干凈編碼等軟件實(shí)踐對(duì)國(guó)際軟件開(kāi)發(fā)人員進(jìn)行培訓(xùn) 。 Cory是Microsoft MVP，Telerik開(kāi)發(fā)專(zhuān)家和outlierdeveloper.com的創(chuàng)始人。

翻譯自: https://www.freecodecamp.org/news/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8/

gulp 和npm

總結(jié)

以上是生活随笔為你收集整理的gulp 和npm_为什么我离开Gulp和Grunt去看npm脚本的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。