最近更新
阅读排行
关注本站

gulp与Grunt的区别

阅读:1160 次   编辑日期:2017-06-19

目录:

概述:

因为node的出现,自动化构建越来越流行,要说到前端自动化构建,那必须会想到Grunt和gulp,恰巧最近这两个我都用过,那么咱们说说这两个的区别。

简单来说,glup相对于Grunt:简单易学,使用简单 ,效率更高,插件功能更简单明了。下面我们具体说说。
今天咱们不讨论怎么用,如果你还是小白,请去官网学习:

易用性:

下面我们看两个实例,不需要仔细看内容,仅仅用来感受。我们先看一个Grunt官网给的 Gruntfile 实例:
    module.exports = function(grunt) {
      // Project configuration.
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
          options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          },
          build: {
            src: 'src/<%= pkg.name %>.js',
            dest: 'build/<%= pkg.name %>.min.js'
          }
        }
      });
      // 加载包含 "uglify" 任务的插件。
      grunt.loadNpmTasks('grunt-contrib-uglify');
      // 默认被执行的任务列表。
      grunt.registerTask('default', ['uglify']);
    };
我们再看gulp一个官网给的 gulpfile.js 实例:
    var gulp = require('gulp');
    gulp.task('default', function() {
      // 将你的默认的任务代码放在这
    });
我不去看具体做了什么,单单从直观感受来讲 ,gulp更符合程序员的编程习惯 ,而Grunt更像是在“配置”。

学习曲线:

gulp官网给出了4个常用API::gulp.src,gulp.dest,gulp.task,gulp.watch
总的来看gulp的学习曲线相对较低。

高效率:

使用Grunt的执行的过程中会产生一些临时文件,一些任务生成临时文件,其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理,只会产生内存。

高质量:

我们在编写代码的时候要写高质量的代码,减少重复或者没有用的代码,在这个对比中也是很重的一环,Gulp的每个插件只完成一个功能,这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。
将本篇文章分享到:
top