Gulp安装及使用

时间：2022-05-10 05:24:57

测试环境

  • 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返回结果

 ➜  * git:(master) ✗ gulp two
  [13:15:05] Using gulpfile ~/*/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
  ➜  * 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返回结果

 ➜  * git:(master) ✗ gulp two
   [13:19:27] Using gulpfile ~/*/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
   ➜  * 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返回结果

   ➜  * git:(master) ✗ gulp two
   [13:47:56] Using gulpfile ~/*/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
   ➜  * git:(master) ✗

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

注意事项

  • gulp-replace替换文本注意点

    将项目工程中所有文件里的helloWorld替换成helloChina

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

如果项目中有不能被编辑器编辑的文件，像.jar、.png、.jpg等，执行上述代码后，整个工程会执行不了，所以在替换的时候，需要添加限制

这里以一般的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

    静态文件服务器，同时也支持浏览器自动刷新

  • yargs

    用于获取启动参数，针对不同参数，切换任务执行过程时需要

  • del

    删除文件或文件夹

  • gulp-util

    gulp常用工具

  • gulp-zip

    用于文件压缩

参考

Gulp官网

插件平台1

插件平台2

glob

标签：

相关文章