前端构建工具 grunt VS gulp

前几天一个前端大拿朋友和我说gulp比grunt更好用，就了解了一下gulp，和grunt做个简单的比较

有两个明显的感受：

（1）使用方式上，gulp的配置文件更清晰便利一些

以css文件的合并压缩为例

代码语言：javascript复制

//------ gulp --------
var gulp = require('gulp'),
concat = require('gulp-concat'),
minifycss = require('gulp-minify-css');
gulp.task('default', function() {
  return
    gulp.src('css/*.css')
    .pipe(concat('min.css'))
      .pipe(minifycss())
      .pipe(gulp.dest('dist'));
});
//------ grunt --------
module.exports = function (grunt) {
  grunt.initConfig({
    concat: {//css文件合并
      css: {
        src: ['src/css/*.css'],
        dest: 'dest/all.css'
      }
    },
    cssmin: { //css文件压缩
       css: {
          src: 'dest/all.css',
          dest: 'dest/all.min.css' 
        }
     }
  });
  grunt.loadNpmTasks('grunt-css');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('default', ['concat','cssmin']);
}

（2）从实现底层文件操作方式上，gulp的效率更高

grunt 的实现方式：

读取源文件 -> N个临时文件 -> 写入目标文件

从配置文件可以看到，每个任务都指定了src和dest，构建过程中会进行多次 读取、修改、写入 操作，I/O操作比较频繁

gulp 的实现方式：

读取源文件 -> 内存文件流 -> 写入目标文件

gulp使用了类似linux命令中的管道思路，开始时读取一次文件，然后就一直使用内存中的文件流，通过管道在不同任务中传递文件流，最后一次性写入文件，I/O操作较少

gulp javascript grunt

0 人点赞