gulp 构建工具

来源：互联网发布：舰娘重巡数据编辑：程序博客网时间：2024/05/21 17:45

gulp

the streaming build system

Gulp 和 Grunt 类似。但相比于 Grunt 的花费大量的时间进行频繁的 IO 操作，Gulp 的流操作，较少io，能更快地完成构建。

特点：

使用方便

通过代码优于配置的策略，Gulp可以让简单的任务简单，复杂的任务更可管理。

构建快速

通过流式操作，减少过程文件的io操作，从而更快地构建项目。

易于学习

少量的API，掌握Gulp可以毫不费力。构建就像流管道一样，轻松加愉快。

例子：

执行流程：

通过sass解析器解析sass文件，并添加css3 浏览器前缀，最后写入目标文件

gulp.task('styles:scss', function () {  return gulp.src(['app/styles/**/*.scss'])    .pipe($.rubySass({      style: 'expanded',      precision: 10,      loadPath: ['app/styles']    }))    .on('error', console.error.bind(console))    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))    .pipe(gulp.dest('.dist/styles'))    .pipe($.size({title: 'styles:scss'}));});

通过gulp，这个流程紧密地呈现出来，非常容易理解

而通过grunt，大致流程如下：

grunt.initConfig({  scss: {    dist: {      files: [{        expand: true,        cwd: 'styles',        src: ['app/styles/**/*.scss'],        dest: './temp/css',        ext: '.css'      }]    }  },  autoprefixer:{    autoprefix{        src:['./temp/css/*.css'],        dest: ['./dist/]    }  }});grunt.registerTask('sass', function () {        grunt.task.run(['scss','autoprefixer']);    });

grunt 先要配置每个独立任务，然后注册一个任务，来综合执行配置的两个任务

初步体验：

gulp 对比 grunt ，优点：

1 正如gulp设计理念，编码优于配置。对于比较简单的任务，将相关流程编码在一起，比较易懂。

2 组件非常丰富、api简单，保存即立即刷新，实现特别简单

缺点：

1 流程紧密联系，不方便复用中间结果

参考：http://blog.csdn.net/ys_073/article/details/20805345

https://developers.google.com/web/fundamentals/tools/build/build_site

0 0