Gulp装配及使用

Gulp安装及使用

测试环境

Mac:10.10.4
Gulp:3.9.0

时间:2015年08月15日18:07:08

安装Gulp

sudo npm install --global gulp

npm install --save-dev gulp

输入gulp -v,显示版本说明安装成功

使用Gulp

在项目根目录创建gulpfile.js文件

var gulp = require('gulp');//引用gulp

gulp.task('default', function() {//创建一个task任务
  // place code for your default task here
});

在终端进入gulpfils.js所在目录.

执行gulp,他会默认执行default,如果没有defaulttask的话，会报错；也可以gulp default

整体文件结构

root
 |----gulpfils.js
 |----app
       |----hello.txt
       |----new
             |----world.txt

src/dest

gulp.src:文件源

gulp.dest:目标文件路径

将文件从文件源传送到目的地,可以说是复制，因为源文件还在。

app目录

app
 |----hello.txt 
 |----new
       |----world.txt

gulp.task('default',function(){
  gulp.src('app/hello.txt')
 .pipe(gulp.dest('core'));//最终文件路径`core/hello.txt`
});

gulp.task('default',function(){
  gulp.src('app/hello.txt')
 .pipe(gulp.dest('core/hello.txt'));//最终文件路径`core/hello.txt/hello.txt`
});

处理多个文件

gulp.task('default',function(){
  gulp.src('app/**')
 .pipe(gulp.dest('core'));//最终文件路径`core/hello.txt/hello.txt`
});

执行之后,core目录

core
 |----hello.txt 
 |----new
       |----world.txt

以下src详解引自无双

*能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
*.* 能匹配 a.js,style.css,a.b,x.y
*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
?.js 能匹配 a.js,b.js,c.js
a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
[xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

当有多种匹配模式时可以使用数组

//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])

使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式

gulp.src(['*.js','!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js','*.js']) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

`log`输出

  console.log("my log");

`exec`执行命令行

var exec = require('child_process').exec;
gulp.task('default', function() {
exec('mkdir mygulp');
});

执行gulp,就可以看到当前目录下创建了一个mygulp文件。

如果你想要回调，可以这样

exec('rm -R mygulpfile',function (error, stdout, stderr){
      if (error !== null) {
        console.log("error: " + error);
      }else{
        console.log("ok");
      }
  });

执行gulp传入参数\接收参数

 var gulp = require('gulp'),
        argv = require('yargs').argv;
    gulp.task('hello_task',function(){
    if(argv.test) {
      var info = argv.test;

      console.log('收到的参数:'+info);
    } else {
      console.log('输入错误 请输入 gulp hello_task --test hellotest');
    }
    });

注：执行yargs的时候可能会出错，按照终端的提示操作即可。

watch

官网

监听文件变化

这里监听app/hello.txt为例

gulp.task('watch', function () {
    gulp.watch('app/hello.txt',function(file){
      console.log(file.type); //变化类型 added为新增,deleted为删除，changed为改变
      console.log(file.path); //变化的文件的路径
    });
});

执行gulp watch。

在hello.txt添加一行hi World

终端输出

[15:43:16] Using gulpfile ~/root/gulpfile.js
[15:43:16] Starting 'watch'...
[15:43:16] Finished 'watch' after 10 ms
changed //修改了文件
~/root/app/hello.txt //文件路径

插件使用

比如说，app文件夹下面，将所有文件里的helloWorld替换为helloChina.

这里使用的是gulp-replace插件,怎么使用，官网有详细文档

安装gulp-replace:执行npm install --save-dev gulp-replace,需要权限的话，在前面加上sudo.

   var gulp = require('gulp'),
       replace = require('gulp-replace');
    gulp.task('replace_code',function(){
      gulp.src('app/**')
      .pipe(replace("helloWorld","helloChina"))
      .pipe(gulp.dest('app'))
    }
);

合并task执行

此时如果有两个task,分别为’task1’、’task2’,执行一个命令，将他俩都执行

gulp.task('task3', ['task1','task2']);

或

gulp.task('task3', ['task1','task2'],function(){
  //coding
});

在终端输入gulp task3,task1和task2都会执行

多个task按顺序执行

参考官网

采用callback

// run a command in a shell
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
// build Jekyll
exec('jekyll build', function(err) {
  if (err) return cb(err); // return error
  cb(); // finished task
});
});

返回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();

  // do async stuff
 setTimeout(function() {
   deferred.resolve();
 }, 1);

return deferred.promise;
});

执行task1后，才能执行task2

这里以执行one后才能执行two为例

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});

gulp.task('default', ['one', 'two']);

或者

(个人测试发现以下也可以实现,及被依赖的task返回文件流)

var gulp = require('gulp');

gulp.task('one', function() {
    return gulp.src('client/**/*.js')
                 .pipe(gulp.dest('build'));
});

gulp.task('two', ['one'], function() {
    // task 'one' is done now
});

Gulp个人理解

gulp可以看做是一个传送带，作用只是将文件从A传送(复制)到B，其他的不做。

如果想要完成文本替换、压缩等功能的话，在传送带上面安装插件，由插件完成。

参考

Gulp官网

插件

glob