PROSAGA码农传奇-gulp-NPM，Bower，Browserify，Gulp，Grunt和Webpack

Webpack和Browserify
Webpack和Browserify几乎完成了相同的工作，即处理要在目标环境（主要是浏览器，尽管您可以将Node等其他环境作为目标）中使用的代码。这种处理的结果是一个或多个捆绑包 -适用于目标环境的组合脚本。

例如，假设您编写了分为模块的ES6代码，并希望能够在浏览器中运行它。如果这些模块是Node模块，则浏览器将无法理解它们，因为它们仅存在于Node环境中。ES6模块也无法在IE11等较旧的浏览器中运行。而且，您可能使用了浏览器尚未实现的实验语言功能（ES的下一个建议），因此运行此类脚本只会引发错误。诸如Webpack和Browserify之类的工具通过将此类代码转换为浏览器能够执行的形式来解决这些问题。最重要的是，它们使对这些捆绑软件进行各种各样的优化成为可能。

但是，Webpack和Browserify在许多方面有所不同，Webpack默认提供许多工具（例如，代码拆分），而Browserify仅在下载插件后才能执行此操作，但使用这两种方法会导致非常相似的结果。它归结为个人喜好（Webpack更为流行）。顺便说一句，Webpack不是任务运行程序，它只是文件的处理器（它通过所谓的加载程序和插件来处理文件），并且可以由任务运行程序（其他方式）运行。

Webpack开发服务器
Webpack Dev Server提供了与Browsersync类似的解决方案-开发服务器，您可以在开发过程中快速部署应用程序，并立即验证开发进度，而开发服务器会根据代码更改自动刷新浏览器，甚至传播更改的代码无需重新加载浏览器即可进行所谓的热模块替换。

任务运行程序与NPM脚本
我一直在使用Gulp来简化和编写任务，但是后来发现我根本不需要Gulp或Grunt。使用NPM脚本通过其API运行第三者工具，我曾经需要的一切都可以完成。在Gulp，Grunt或NPM脚本之间进行选择取决于团队的品味和经验。

尽管即使对于不那么熟悉JS的人来说，Gulp或Grunt的任务也很容易阅读，但它是又一个需要学习的工具，我个人更喜欢缩小依赖范围并使事情变得简单。另一方面，用NPM脚本和运行那些第3方工具（例如，出于清洁目的而配置和运行rimraf的 Node脚本）组合的NPM脚本和（适当地是JS）脚本替换这些任务可能更具挑战性。但是在大多数情况下，这三个结果是相等的。

例子
对于示例，我建议您看一下这个React starter项目，该项目向您展示了NPM和JS脚本的完美结合，涵盖了整个构建和部署过程。您可以package.json在根文件夹中名为的属性中找到这些NPM脚本scripts。在那里，您通常会遇到类似的命令babel-node tools/run start。Babel-node是一个CLI工具（不适用于生产），首先会编译ES6文件tools/run（位于tools内的 run.js文件）- 本质上是一个运行器实用程序。该运行程序将一个函数作为参数并执行它，在这种情况下，它是start-另一个实用程序（start.js）负责捆绑源文件（客户端和服务器）并启动应用程序和开发服务器（开发服务器可能是Webpack开发服务器或Browsersync）。

准确地说，start.js创建客户端和服务器端捆绑包，启动Express服务器，并在成功启动后初始化Browser-sync，在编写本文时，它看起来像这样（有关最新代码，请参考React Starter项目）。

```
const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

// no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)
```

重要的部分是proxy.target，他们在其中设置要代理的服务器地址，该地址可能是http：// localhost：3000，并且Browsersync启动了一个监听http：// localhost：3001的服务器，在该服务器上，生成的资产会自动更改检测和热模块更换。如您所见，还有另一个配置属性，files其中包含单个文件或模式浏览器同步监视更改并在发生某些更改时重新加载浏览器，但是正如评论所述，Webpack会通过HMR自行监视js源，因此它们可以协作那里。

现在我没有任何类似的Grunt或Gulp配置示例，但是使用Gulp（和Grunt有点类似），您可以在gulpfile.js中编写单个任务，例如
```
gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});
```
这次使用任务运行程序，您将在实质上与入门工具包中执行相同的操作，这为您解决了一些问题，但提出了自己的问题以及学习用法时遇到的一些困难，正如我所说的，您拥有的依赖项越多，出错的可能性就越大。这就是我喜欢摆脱此类工具的原因。