Gulp安装及使用

Posted 2020-09-27 cxchanpin

測试环境

• 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