測試環境

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

,假設沒有

default

task的話，會報錯；也能夠

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 能比對 foo.js , a/foo.js , a/b/foo.js , a/b/c/foo.js
az 能比對 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

終端輸出

[::] Using gulpfile ~/root/gulpfile.js
[::] Starting 'watch'...
[::] Finished 'watch' after  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(); 
      }, );

  });

  // 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
  [::] Using gulpfile ~/Shadowsocks/gulpfile.js
  [::] Starting 'one'...
  開始運作one
  運作oneOk
  [::] Finished 'one' after  s
  [::] Starting 'two'...
  開始運作two
  [::] Finished 'two' after  μ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
   [::] Using gulpfile ~/Shadowsocks/gulpfile.js
   [::] Starting 'one'...
   開始運作one
   運作oneOk
   [::] Finished 'one' after  s
   [::] Starting 'two'...
   開始運作two
   [::] Finished 'two' after  μs
   ➜  Shadowsocks git:(master) ✗

傳回promise

假設沒有

的話,運作

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();
       }, );

       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
   [::] Using gulpfile ~/Shadowsocks/gulpfile.js
   [::] Starting 'one'...
   開始運作one
   運作oneOk
   [::] Finished 'one' after  s
   [::] Starting 'two'...
   開始運作two
   [::] Finished 'two' after  μ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，其它的不做。

假設想要完畢文本替換、壓縮等功能的話。在傳送帶上面安裝插件。由插件完畢。

參考

Gulp官網

插件平台1

插件平台2

glob

Gulp安裝及使用安裝Gulp使用GulpGulp個人了解推薦插件參考

安裝Gulp

使用Gulp

src/dest

`log` 輸出

`exec` 運作指令行

運作gulp傳入參數\接收參數

watch

插件使用

合并task運作

多個task按順序運作

採用callback

傳回stream

傳回promise

注意事項

Gulp個人了解

推薦插件

參考

繼續閱讀

CSU 1561 (More) Multiplication

CSU 1566 The Maze Makers

UESTC 1269 ZhangYu Speech

位元組面試官：2021年Android常見面試題，面試必備

Android 車載之車載投屏~

阿裡巴巴Double分布式服務架構

[Linux] diff 查找檔案的異同

新聞 | Mapbox 牽手阿裡，飛豬旅行上線六大城市地圖功能

IDEA以http形式clone代碼連接配接逾時

HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

[轉]iOS微信小視訊優化心得

最小化DevOps自動化流程(Golang)

android 主線程的相關問題

Git學習筆記5 merge沖突時二選一

vue-cli簡介（中文翻譯）

Gulp安裝及使用安裝Gulp使用GulpGulp個人了解推薦插件參考

安裝Gulp

使用Gulp

src/dest

log 輸出

exec 運作指令行

運作gulp傳入參數\接收參數

watch

插件使用

合并task運作

多個task按順序運作

採用callback

傳回stream

傳回promise

注意事項

Gulp個人了解

推薦插件

參考

繼續閱讀

`log` 輸出

`exec` 運作指令行