前端开发构建工具之Gulp

Grunt与Gulp

对于我们前端开发者,目前使用最多的自动化管理工具应该还是Grunt–在Gruntfile.js文件中使用JavaScript定义各种任务;在本篇主要介绍Gulp,gulp是一种基于流的前端自动化构建工具。

Gulp

基于Node.js流,配置简单,易于学习,使用方便。在guplfile.js里按定义好的规则执行构建任务。学习Gulp之前先来了解一下Vinyl和Orchestrator

Vinyl

Vinyl是一种虚拟文件格式,是一种简单的描述文件的元数据对象。主要有path和contents两个属性。

Vinyl adpter

Vinyl对文件进行了描述,而Vinyl adpter通过提供src和dest方法支持我们对文件进行访问。


var map = require('map-stream'); var vfs = require('vinyl-fs'); var log = function(file, cb) { console.log(file.path); console.log(file.contents); cb(null, file); }; vfs.src(['./js/**/*.js', '!./js/except/*.js']) .pipe(map(log)) .pipe(vfs.dest('./output'));

Orchestrator

一个指定任务和依赖的关系与处理,然后并发执行任务的模块。


var Orchestrator = require('orchestrator'); var orchestrator = new Orchestrator(); orchestrator.add('thing1', function(){ // do stuff }); orchestrator.add('thing2', function(){ // do stuff }); orchestrator.add('thing3', ['thing2'], function(){ // do stuff }); orchestrator.start('thing1', 'thing3', function (err) { // all done });

Gulp五个API

  • gulp.src()

    接受一个匹配模式或一个匹配模式数组,返回对应的Viny files流,可以当作其他插件的输入。


    var gulp = require('gulp') , jshint = require('gulp-jshint') , concat = require('gulp-concat') , uglify = require('gulp-uglify') , rename = require('gulp-rename'); gulp.src(['./app/src/js/**/*.js', '!./app/src/js/**/*.min.js']) .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('./app/build/js'));
  • gulp.dest()

    接收一个路径参数(可以由函数返回一个路径),,输出数据,写入文件。

  • gulp.task()

    定义gulp任务,并制定任务依赖及执行规则。Gulp的任务操作继承自Orchestrator。


    //gulp source code var util = require('util'); var Orchestrator = require('orchestrator'); function Gulp() { Orchestrator.call(this); } util.inherits(Gulp, Orchestrator); Gulp.prototype.task = Gulp.prototype.add;

    简单声明依赖后,任务函数依顺序执行:


    gulp.task('compileLESS', ['clean'], function(){ //compile LESS file... }); gulp.task('clean', function(){ gulp.src('sample.css', { read:false }) .pipe(clean()); });

    保证任务顺序执行(返回流):


    gulp.task('compileLESS', ['clean'], function(){ //compile LESS file... }); gulp.task('clean', function(){ return gulp.src('sample.css', { read:false }) .pipe(clean()); });
  • gulp.run()

    接收一个任务名,执行该任务。

  • gulp.watch()

    接收一个匹配模式或匹配模式数组,可选的传入一个回调函数,返回一个EventEmitter发送change事件;监听匹配文件的变化,一旦文件发生变化就促发回调。


    var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });

    gulp.watch('./app/src/js/**/*.js', function() { gulp.run('lint', 'scripts'); });

Grunt VS Gulp

无论grunt还是gulp亦或是webpack,npm scripts,它们都只是一个工具,让我们更专注在代码上,而不应该是迷失在众多工具中。尽管如此,在个人使用中,grunt与gulp还是有差别,主要从两方面简要说明:

  • 配置和使用

    • gulp基于CommonJs规范,gulpfile.js配置更简单、代码更适于维护。
    • gulp的五个API清晰简单,使用更简单。
    • grunt插件更丰富、功能更全面。
  • 底层文件操作

    • grunt以临时文件的形式,从源文件,生成多个临时文件,根据不同任务进行多次读写,最后生成目标文件,I/O操作较频繁。
    • gulp以流的形式,从源文件一次读操作,通过管道方式使用内存中的文件流在不同任务间传递,最后写入目标文件I/O操作较少,

原创文章,转载请注明: 转载自 熊建刚的博客

本文链接地址: 前端开发构建工具之Gulp

熊 建刚

热爱前端,但不局限于前端,喜欢尝试各种新技术,爱好读书。

One thought on “前端开发构建工具之Gulp

发表评论

电子邮件地址不会被公开。 必填项已用*标注