首页 > 编译同样的scss,为什么gulp的速度几乎是grunt的两倍?

编译同样的scss,为什么gulp的速度几乎是grunt的两倍?

编译同样的scss,为什么gulp的速度几乎是grunt的两倍?
请说明原理,如果有代码解析就更好了。


gulp利用nodejs强大的流(stream),不需要往磁盘写中间文件,直接将最后结果输出写入磁盘。所以速度比grunt快。

下面的例子原文的地址在这里 http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/
直接抢过来用

举个例子,例如我们先进行sass,再进行autoprefixer

显然grunt有多余中间的磁盘I/O读和写,而gulp只有一次读和写。

至于楼主问的gulp-sass和grunt-sass两者之间的速度差异,这个我们就要翻看两者的源码,看看它们内部是如何运作的,两者都是通过node-sass处理scss文件的。

区别是,grunt是将scss文件全部读入到内存中,然后编译成css,再全部写入到文件。
gulp是基于stream的方式,一点一点处理成css,一点一点写入文件,就像管道里的水流一样。

我们可以写两个例子测试一下,以copy文件为例,并把文件内容从小写字母变成大写.

拷贝一份冰与火之歌第一卷的英文版txt 下载地址

var fs = require('fs');

function copy(src, target) {
    var content = fs.readFileSync(src).toString().toUpperCase();
    fs.writeFileSync(target, content);
}

console.time('grunt way');
copy('./test.txt', './test1.txt');
console.timeEnd('grunt way');
var fs = require('fs');
var through  = require('through2');
var stream = through(write, end);

function write(buffer, encoding, next){
    this.push(buffer.toString().toUpperCase());
    next();
}

function end(done){
   done();
}

function copy(src, target) {
    fs.createReadStream(src).pipe(stream).pipe(fs.createWriteStream(target));
}

console.time('gulp way');
copy('./test.txt', './test2.txt');
console.timeEnd('gulp way');

结果,直接把我吓尿了:

关于gulp的资料,你可以参考这个 https://github.com/Platform-CUF/use-gulp
关于nodeJS stream,nodeschool中的stream-adventure课程有兴趣学学
另外,如果你可以翻墙,这两个视频你也可以看看,Pipes, streams and distributed systems
还有这个How streams help to raise Node.js performance

【热门文章】
【热门文章】