gulp 初探

因为最近在学习ES6，因缘巧合下接触到了gulp，关于gulp的概念网上一大堆，反正就是自动化构建工具。用了一下感觉还是很方便的，省去了很多重复的工作，还是蛮舒服的~~。

至于怎么安装不是本文的重点，官网上有安装的过程都很简单，本文主要聊聊如何用

首先学习的第一步肯定是去官网看API，gulp的API很简单，我们先熟悉API，之后再举例子，不要着急

gulp.src(globs[, options])

输出一个文件第一个参数是一个路径，支持glob表达方式

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

第一个参数可以是路径或者是一个vinyl 文件实例

gulp.task(name[, deps], fn)

这个就是布置任务，我们就是通过布置一个又一个的任务来实现构建我们的项目的
第一个参数是你的任务名字也就是你在命令行中运行你的任务时候需要输入的
第二个参数是依赖，也就是说我这个任务需要哪些任务执行完之后才能执行，这里注意的是我们只能确定这个任务是在后面deps之后执行，但deps中的任务gulp会尽可能并行，所以我们需要确保deps中的任务有正确的顺序，那如何使deps中的任务有正确的顺序，官网里给出了3种方法。

一种是接收回调函数，gulp会传入一个回调函数作为参数，当你的任务完成时，调用这个回调函数，就可以通知gulp你的任务的确完成了：

gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

返回一个 stream

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

返回一个 promise

var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

第三个参数除了上面的回调函数用法，其实大多数时候都是下面这样的
gulp.src('bower_components/**/*') .pipe(gulp.dest('build/vendor'))

最后一个API是

gulp.watch(glob[, opts], tasks)

监听文件变化，执行相应的tasks。

gulp.watch(glob[, opts, cb])

gulp.watch('bower/**/*', ['bower'])//监听bower下的所有文件，如果变化执行bower任务。

或者是直接执行方法

gulp.watch(['server/**/*.js','server/app.js'],function(){
        console.log('1')
    })//当监听的文件发生变化时执行function中的代码。

到此我们就答题熟悉了下API，是时候动手写写简单的例子了，举一个简单的例子我们现在需要将A目录下所有的文件复制到B文件的目录下，我们该如何实现呢
创建gulpfile.js这个名字是固定的，只能这么命名，还需要node.js环境，node怎么安装就不说了，网上一大堆
先看下我们当前的目录结构
A文件下有一个a.html我没截图到


var gulp = require('gulp')

gulp.task('move',function(){//布置一个任务move
    gulp.src('A/a.html')//输出文件A下面的a.html返回的是一个流
        .pipe(gulp.dest('B'))//管道执行写入B目录，之后再返回一个流
})

我们在node命令行中gulp move
目录结构变成这里写图片描述

所以gulp的基本实现是很简单的。这就实现了目录的拷贝。
但在实际中我们更多的是与gulp插件结合使用，下一次会介绍一下gulp有趣的插件，来简化我们的操作

猜你喜欢