測试环境

  • 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

最新文章

  1. 编写Javascript类库（jQuery版） - 进阶者系列 - 学习者系列文章
  2. onethink和thinkphp3.2学习
  3. 状态栏 a.getBoolean(1, false) 报错
  4. Vue系列： 如何通过组件的属性props设置样式
  5. QT进度条QProgressBar的练习（定制QProgressBar，单独成为一个控件）
  6. LA 3135 (优先队列) Argus
  7. Linux环境下添加ftp账号步骤
  8. python3 解析apk图标
  9. 添加鼠标右键菜单项(EditPlus为例)
  10. Azure ARM (17) 基于角色的访问控制 (Role Based Access Control, RBAC) - 自定义Role
  11. mysql 单列无重复
  12. getOrderValue 排序 sql server
  13. qtp中type方法的按键常量
  14. useradd和groupadd（Linux创建用户\用户组\设置\分配用户权限\多用户远程登录权限）的使用
  15. html 三列布局（两列自适应，一列固定宽度）
  16. python爬虫之win7Mongod安装使用
  17. Java中Lambda表达式的使用（转）
  18. Win10系列：C#应用控件基础10
  19. POI插入图片至Excel使用固定的长宽
  20. core Animation之CAAnimationGroup(动画群组)

热门文章

  1. [转] 一个U盘病毒简单分析
  2. codeforces_D. Social Circles
  3. Python 源码分析：queue 队列模块
  4. Js 之图片懒加载插件
  5. April Fools Day Contest 2019: editorial回顾补题
  6. CPU怎么计算1+1----CPU计算的电路基础
  7. JavaSE-07 类
  8. Myeclipse下载
  9. JavaScript exec()方法
  10. C++ 指针形参和指针引用形参的原理分析