grunt 和gulp_构建脚本之战：Gulp与Grunt

最新推荐文章于 2021-10-11 10:37:24 发布

cune1359

最新推荐文章于 2021-10-11 10:37:24 发布

阅读量199

点赞数

文章标签： python java vue 深度学习人工智能 ViewUI

我已经写过关于Gulp入门以及Grunt入门的文章。它们都使我们的任务自动化 ，都使用Node ，并且都需要您创建任务并安装某种插件。但是您是否想知道两者之间的差异，甚至更好？

在本文中，我将主要着眼于这两个项目之间的差异，这些差异可能会有助于您确定您认为自己更适合的两个项目 。我将使用一些可能不熟悉的代码。如果是这样，我建议您在开始之前通读以前发表的两篇文章。

速度

Gulp和Grunt之间的主要区别在于它们如何在内部处理其自动化任务 。 Gulp使用Node流，而Grunt使用临时文件。让我们用简单的英语说吧？

假设您想为您的项目编写SASS代码。您可能希望编译您的SASS代码，然后将其最小化。

Grunt使用作为磁盘I / O操作的中间文件来处理此问题。您的SASS文件被编译，然后写入一个临时文件。临时文件由自动前缀程序使用，然后将最终产品写入目标文件。

Gulp负责所有这些内存操作 。您的源SASS文件被编译，结果被传递到自动前缀程序，而没有被写入文件，然后目标文件被写出。

与内存操作相比，磁盘写入速度较慢，这意味着Gulp具有很大的速度优势 （目前）。通过tech.tmw进行的速度比较表明，大多数任务在Gulp上的速度至少是其两倍。尽管这不是一项非常科学研究的研究，但趋势仍然存在，我在自己的项目中也看到了同样的趋势。但是速度差异的影响有多大？

差异秒

对于大多数项目而言，这无关紧要。 多数项目很小 。当您创建WordPress主题或类似内容时，您需要使用的文件数量在合理的范围内。样式表是在400毫秒还是800毫秒内编译的，这并不重要。

此外，大多数项目的构建方式可以避免一些最密集的问题 。如果您有50个SASS文件，则可以在开发过程中将它们串联起来，而无需自动添加前缀或缩小它们的大小。您每次保存项目时都不需要优化图像，依此类推。

即使在因为将工作推送到登台服务器上或在更新存储库而确实需要大手笔时，5秒或9秒的构建时间也有很大的不同吗？

最重要的是，Grunt将在即将发布的0.5版本中增加对管道的支持，这将大大加快工作速度，这是一个有争议的问题。

社区

Grunt已经比Gulp长了很多，因此拥有大量的用户群。目前，Grunt平均每天平均下载约37,000次下载，而Gulp的下载量略高于一半，接近23,000大关。话虽这么说，古尔普（Gulp）才存在了一年半，至少可以说是这个数字。

Grunt目前有4000多个插件，而Gulp有1200多个插件。根据Google的趋势，越来越多的人搜索与Grunt相关的东西，有更多的论坛来解决这个问题，并且通常会有更多的社区支持。

当然Gulp正在兴起，这意味着从长远来看 ，这可能会变得均衡 。但是，这对于某些开发人员，尤其是那些基于Grunt的项目的开发人员，是一个障碍。

我想指出，这两个社区都非常好 。据我所知，每个社区的领导者之间的关系是惊人的，应该作为所有人的榜样。 Gulp的创建者实际上帮助速度测试比较的作者提高了计时精度，从而减少了时差。那就是我所说的绅士！

代码与配置

显然，这是许多人的转折点，但老实说，我个人看不到这个问题。

争论是这样的：Gulp是一个很好的例子， 当配置有些混乱时，配置代码可以成为一件好事 。其他人说，虽然这是正确的，并且Gulp易于阅读，但编写起来却更加困难，因为管道操作可能会造成一些混乱 。

在开始介绍之前，先在Grunt中介绍相同的示例，然后在Gulp中：

grunt.initConfig({
    sass: {
        dist: {
            files: [{
                src: 'dev/*.scss',
                dest: '.tmp/styles',
                expand: true,
                ext: '.css'
            }]
        }
    },
    autoprefixer: {
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/styles',
                src: '{,*/}*.css',
                dest: 'css/styles'
            }]
        }
    },
    watch: {
        styles: {
            files: ['dev/*.scss'],
            tasks: ['sass:dist', 'autoprefixer:dist']
        }
    }
});
grunt.registerTask('default', ['styles', 'watch']);

gulp.task('sass', function () {
  gulp.src('dev/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('css/styles'));
});
gulp.task('default', function() {
  gulp.run('sass');
  gulp.watch('dev/*.scss', function() {
    gulp.run('sass');
  });
});

我的看法是，这真的没有关系。当然，如果您习惯了第一种方式，则可能需要花费一些时间来解决第二种方式，但这也确实是相反的。因此，对我而言，“令人困惑”的论点完全无效。首先， 您学到的 任何 新方法都会使您感到困惑 ，但是如果您花时间去理解每种方法的逻辑，那么一切都会变得很平稳。

就是说，我个人更喜欢Gulp的API，因为它更干净 ，并且比Grunt更能反映我的思考方式。当然，这完全是主观的 ，与Grunt 完全无关，这只是我个人的喜好。