【译】相对完整的Gulp4升级指南

   <p>原文链接 <a href="/misc/goto?guid=4959673859285778392" rel="nofollow,noindex">The Complete-Ish Guide to Upgrading to Gulp 4</a></p>    <p>Gulp4虽然一直在开发中，但是再将来的某一天你始终会用上它。这篇文章将向你介绍Gulp3.x和Gulp4之间的不同点，以及教你如何相对无痛的迁移到新的版本。</p>    <p>安装</p>    <p>在你开始使用最新版的Gulp之前，你需要确认你当前的Gulp版本。通常，你只需要更新你的 package.json 中的版本号就行了，不过有时候你也有可能碰到一些额外的麻烦。最可能的原因是你分别在当前项目文件夹下和本地全局中都安装了Gulp（如果你读过了这篇文章 <a href="/misc/goto?guid=4959673859376432700" rel="nofollow,noindex">the practice of using npm scripts to access the locally installed version of CLI’s</a> ，那就好办多了。虽然在这里它可能还是帮不了你太多）。因此，首先你要把你项目文件夹下的Gulp删除，如果你在全局环境中也安装了Gulp，最好也把它删了。</p>    <pre>  <code class="language-bash">npm uninstall gulp --save-dev  npm uninstall gulp -g  </code></pre>    <p>现在你就可以在你的项目中安装Gulp4。因为它还没有正式发布，我们只能直接通过Github来安装它：</p>    <pre>  <code class="language-bash">npm install gulpjs/gulp.git#4.0  --save-dev  </code></pre>    <p>当它在npm上发布后，你就可以像平常一样使用 npm install gulp --save-dev 了。而且，当他最终正式发布时，我们也最好停止从Github上安装，改为直接从npm上进行安装。好了，现在我们还有另一个东西需要安装：GLI工具。跟现在的Grunt类似的，Gulp4把GLI工具从Gulp的核心代码中剥离了。Gulp3和Gulp4都能使用独立出来的GLI工具。</p>    <pre>  <code class="language-bash">npm install gulp-cli --save-dev  </code></pre>    <p>如果你不想在你的项目中使用npm scripts，你需要使用 -g 替换 -save-dev 来进行全局安装。现在你就可以像以前一样使用 gulp 命令了，但是你应该会得到一个错误信息，因为你需要更新你的 gulpfile.js 来兼容最新版的Gulp。</p>    <p>任务重构</p>    <p>如果你的任务代码十分简单，不依赖其他任何东西。那你将幸运的不需要做任何修改！不过令人哀伤的是，相当一部分人都需要修改他们的代码。Gulp4做的最大的一个改变就是 gulp.task 方法现在只支持两个参数，分别是任务名和运行任务的function。举个例子，下面的任务代码可以很好的运行在Gulp3和Gulp4上面：</p>    <pre>  <code class="language-bash">gulp.task('clean', function() {...})  </code></pre>    <p>但是当你使用三个参数时怎么办？我们该怎么控制任务之间的相互依赖？这时你应该会用到最新的 gulp.series 和 gulp.parallel 方法。这两个方法会接受一个函数列表或一堆任务名，然后组合成一个方法。 gulp.series 会返回一个方法用来顺序执行它所接受的任务/方法，而 gulp.parallel 返回的方法则会并行的运行它们。Gulp总算能够让我们自由的选择以串行或并行的方式来执行任务而不再需要其他的第三方依赖（比如常用的 <a href="/misc/goto?guid=4959645084882194201" rel="nofollow,noindex">run-sequence</a> ），也不再需要定义一堆让人看不懂的任务依赖。</p>    <p>因此，如果你以前是这么写：</p>    <pre>  <code class="language-bash">gulp.task('styles', ['clean'], function() {      ...  });</code></pre>    <p>那你现在可以这样：</p>    <pre>  <code class="language-bash">gulp.task('styles', gulp.series('clean', function() {      ...  }));</code></pre>    <p>在改写的时候，不要忘了现在你的主任务方法也是放在gulp.series里面调用，所以不要忘了在结尾加上括号。很多人经常犯这个错误。</p>    <p>注意，由于 gulp.series 和 gulp.parallel 返回的是一个方法，所以他们是可以被嵌套调用的。如果您的任务往往有多个依赖任务，你会经常嵌套调用它们。比如这个例子：</p>    <pre>  <code class="language-bash">gulp.task('default', ['scripts', 'styles'], function() {      ...  });</code></pre>    <p>你可以改写成：</p>    <pre>  <code class="language-bash">gulp.task('default', gulp.series(gulp.parallel('scripts', 'styles'), function() {      ...  }));</code></pre>    <p>不过，这样代码的可读性将大大受影响。不过考虑到这样会使你代码更加的灵活可控，这点代价也就无所谓了。当然你也可以自己封装一些helper/alias方法来简化的你的代码，提高可读性，我也不反对，但我应该不会这么去做。</p>    <p>未完………………</p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959673859488482671" rel="nofollow">https://segmentfault.com/a/1190000005357048</a></p>    <p> </p>