您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> Web开发 >> 编译同样的scss,为什么gulp的速度几乎是grunt的两倍?

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

来源:网络整理     时间:2016/5/14 10:37:38     关键词:Grunt,CSS

关于网友提出的“编译同样的scss,为什么gulp的速度几乎是grunt的两倍?”问题疑问,本网通过在网上对“编译同样的scss,为什么gulp的速度几乎是grunt的两倍?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

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

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


解决方案1:

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


以上介绍了“编译同样的scss,为什么gulp的速度几乎是grunt的两倍?”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/1067301.html

相关图片

相关文章