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文件夹

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按顺序运行

參考官网

这里以运行one后才干运行two为例

採用callback

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
  gulp.task('one', function(cb) {
      console.log('開始运行one');
      // 延时
      setTimeout(function(){
          console.log('运行oneOk');
          cb();
      }, 2000);

  });

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

运行gulp two返回结果

 ➜  Shadowsocks git:(master) ✗ gulp two
  [13:15:05] Using gulpfile ~/Shadowsocks/gulpfile.js
  [13:15:05] Starting 'one'...
  開始运行one
  运行oneOk
  [13:15:07] Finished 'one' after 2 s
  [13:15:07] Starting 'two'...
  開始运行two
  [13:15:07] Finished 'two' after 99 μs
  ➜  Shadowsocks git:(master) ✗   

返回stream

 var gulp = require('gulp');

   gulp.task('one', function(cb) {
     console.log('開始运行one');
     // 处理文件
     var stream = gulp.src('gulp/**')
                 .pipe(gulp.dest('build'));
     console.log('运行oneOk');
     return stream;
   });

   gulp.task('two', ['one'], function() {
       // task 'one' is done now
       console.log('開始运行two');
   });

运行gulp two返回结果

 ➜  Shadowsocks git:(master) ✗ gulp two
   [13:19:27] Using gulpfile ~/Shadowsocks/gulpfile.js
   [13:19:27] Starting 'one'...
   開始运行one
   运行oneOk
   [13:19:44] Finished 'one' after 17 s
   [13:19:44] Starting 'two'...
   開始运行two
   [13:19:44] Finished 'two' after 183 μs
   ➜  Shadowsocks git:(master) ✗ 

返回promise

假设没有q的话,运行sudo npm install q

var gulp = require('gulp');
   var Q = require('q');

   gulp.task('one', function() {
       console.log('開始运行one');
       var deferred = Q.defer();

       // do async stuff
       setTimeout(function() {
          console.log('运行oneOk');
          deferred.resolve();
       }, 2000);

       return deferred.promise;
     });

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

运行gulp two返回结果

   ➜  Shadowsocks git:(master) ✗ gulp two
   [13:47:56] Using gulpfile ~/Shadowsocks/gulpfile.js
   [13:47:56] Starting 'one'...
   開始运行one
   运行oneOk
   [13:47:58] Finished 'one' after 2 s
   [13:47:58] Starting 'two'...
   開始运行two
   [13:47:58] Finished 'two' after 67 μs
   ➜  Shadowsocks git:(master) ✗ 

附:假设在上述三种方法中，均加入gulp.task('default', ['one', 'two']);,运行gulp,效果也是一样的.

注意事项

• gulp-replace替换文本注意点

  将项目project中全部文件中的helloWorld替换成helloChina

gulp.src('app/**')
    .pipe(replace("helloWorld","helloChina"))
    .pipe(gulp.dest('app'))

假设项目中有不能被编辑器编辑的文件，像.jar、.png、.jpg等，运行上述代码后。整个project会运行不了，所以在替换的时候。须要加入限制

这里以一般的Android项目为例,不可被编辑的文件有.jar、.png、.jpg

gulp.src(['app/**','!**/*.jar','!**/*.png','!**/*.png'])
    .pipe(replace("helloWorld","helloChina"))
    .pipe(gulp.dest('app'))

Gulp个人理解

gulp能够看做是一个传送带，作用仅仅是将文件从A传送(复制)到B，其它的不做。

假设想要完毕文本替换、压缩等功能的话。在传送带上面安装插件。由插件完毕。

推荐插件

• run-sequence

  让gulp任务。能够相互独立。解除任务间的依赖，增强task复用

• browser-sync

  静态文件server，同一时候也支持浏览器自己主动刷新

• yargs

  用于获取启动參数。针对不同參数。切换任务运行过程时须要

• del

  删除文件或文件夹

• gulp-util

  gulp经常使用工具

• gulp-zip

  用于文件压缩

參考

Gulp官网

插件平台1

插件平台2

glob