gulpJs使用總結

GeekGhc發表於2017-02-23
JS

1.gulp安裝

1.首先確保你已經正確安裝了nodejs環境。然後可以全域性方式安裝gulp：

$ npm install -g gulp

我們可以檢查一下gulp版本

$ gulp -v

這樣就完成了對全域性的安裝
2.如果想在安裝的時候把gulp寫進專案package.json檔案的依賴中，則可以加上–save-dev：

$ npm install --save-dev gulp

其中--save-dev和--save的區別這裡也有清楚的解釋

這其實在composer安裝依賴包是一樣的 一個存在require一個存在require-dev

2.開始使用gulp

1.和其他的構建工具一樣gulpjs也需要一個相應的配置檔案gulpfile.js 執行

$ touch gulpfile.js

2.首先是一個簡單的egulpfile.js內容:

var gulp = require(`gulp`);
gulp.task(`default`,function(){
    // 將你的預設的任務程式碼放在這
});

3.執行gulp

$ gulp

要執行gulp任務，只需切換到存放gulpfile.js檔案的目錄，然後在命令列中執行gulp命令就行了，gulp後面可以加上要執行的任務名，例如gulp task1，如果沒有指定任務名，則會執行任務名為default的預設任務

這裡預設的名為 default 的任務（task）將會被執行，但是這個任務並未做任何事情。
如果想要單獨執行特定的任務，請輸入

gulp <task> <othertask>

3.gulp API使用

gulp只有五個方法:task run watch src dest

1.gulp.src(globs[, options])

  • globs引數是檔案匹配模式(類似正規表示式),他的型別是String或Array,用來匹配檔案路徑(包括檔名)，當然這裡也可以直接指定某個具體的檔案路徑。當有多個匹配模式時，該引數可以為一個陣列。

  • options為可選引數。通常情況下我們不需要用到。

我們這裡簡單可以理解為這個方法就是讀取你需要操作的檔案的

當有多個匹配規則時 可以傳入陣列 如:

//使用陣列的方式來匹配多種檔案
gulp.src([`js/*.js`,`css/*.css`,`*.html`])

除此之外 陣列還可以進行排除的匹配(ps:陣列的第一個元素不能進行排除模式)

gulp.src([*.js,`!a*.js`]) //    匹配所有js檔案，但排除掉以a開頭的js檔案

gulp.src([`!a*.js`,*.js]) //不會排除任何檔案，因為排除模式不能出現在陣列的第一個元素中

2.gulp.dest(path[, options])
簡單的說gulp.dest()是用來寫檔案的

  • path為寫入檔案的路徑

  • options為一個可選的引數物件，通常我們不需要用到

gulp的執行流程大致是這樣的:

gulp的使用流程一般是這樣子的：首先通過gulp.src()方法獲取到我們想要處理的檔案流，

然後把檔案流通過pipe方法匯入到gulp的外掛中，最後把經過外掛處理後的流再通過pipe方法匯入到gulp.dest()中，

gulp.dest()方法則把流中的內容寫入到檔案中，這裡首先需要弄清楚的一點是，

我們給gulp.dest()傳入的路徑引數，只能用來指定要生成的檔案的目錄，而不能指定生成檔案的檔名，

它生成檔案的檔名使用的是匯入到它的檔案流自身的檔名，所以生成的檔名是由匯入到它的檔案流決定的，

即使我們給它傳入一個帶有檔名的路徑引數，然後它也會把這個檔名當做是目錄名，例如：

var gulp = require(`gulp`);
gulp.src(`script/jquery.js`)
    .pipe(gulp.dest(`dist/foo.js`));
//最終生成的檔案路徑為 dist/foo.js/jquery.js,而不是dist/foo.js

通過指定gulp.src()方法配置引數中的base屬性，我們可以更靈活的來改變gulp.dest()生成的檔案路徑。
當我們沒有在gulp.src()方法中配置base屬性時，base的預設值為萬用字元開始出現之前那部分路徑，例如：

gulp.src(`app/src/**/*.css`) //此時base的值為 app/src

gulp.src()的bade屬性可以在options裡指定

gulp.src(`client/js/**/*.js`, { base: `client` })
  .pipe(minify())
  .pipe(gulp.dest(`build`));  // 寫入 `build/js/somedir/somefile.js`
  
gulp.src(script/lib/*.js, {base:`script`}) //配置了base引數，此時base路徑為script
   //假設匹配到的檔案為script/lib/jquery.js
   .pipe(gulp.dest(`build`)) //此時生成的檔案路徑為 build/lib/jquery.js

我們可以這樣理解:
上面我們說的gulp.dest()所生成的檔案路徑的規則，其實也可以理解成，用我們給gulp.dest()傳入的路徑替換掉gulp.src()中的base路徑，最終得到生成檔案的路徑。

3.gulp.task(name[, deps], fn)

  • name 為任務名(請不要在名字中使用空格)

  • deps 是當前定義的任務需要依賴的其他任務，為一個陣列。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數

  • fn 為任務函式，我們把任務要執行的程式碼都寫在裡面。該引數也是可選的。

gulp中執行多個任務，我們的專案裡肯定會有處理類似css js images fonts 這樣的靜態檔案的幾個任務
可以通過任務依賴來實現。例如我想要執行one,two,three這三個任務，那我們就可以定義一個空的任務，然後把那三個任務當做這個空的任務的依賴就行了：

//只要執行default任務，就相當於把css,images,scripts這三個檔案任務執行了
gulp.task(`default`,[`css`,`images`,`scripts`]);

如果任務相互之間沒有依賴，任務會按你書寫的順序來執行，如果有依賴的話則會先執行依賴的任務。

在處理所依賴的任務是非同步的這樣的應用場景也是有幾種解決方案的：

4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

gulp.watch()用來監視檔案的變化，當檔案發生變化後，我們可以利用它來執行相應的任務，例如檔案壓縮等。

  • glob 為要監視的檔案匹配模式，規則和用法與gulp.src()方法中的glob相同。

  • opts 為一個可選的配置物件，通常不需要用到

  • tasks 為檔案變化後要執行的任務，為一個陣列

每當監視的檔案發生變化時，就會呼叫這個函式,並且會給它傳入一個物件，該物件包含了檔案變化的一些資訊，type屬性為變化的型別，可以是added,changed,deleted；path屬性為發生變化的檔案的路徑

gulp.watch(`js/**/*.js`, function(event){
    console.log(event.type); //變化型別 added為新增,deleted為刪除，changed為改變 
    console.log(event.path); //變化的檔案的路徑
}); 

gulp.watch(`js/**/*.js`, function(event) {
  console.log(`File ` + event.path + ` was ` + event.type);
});

4.gulp 外掛使用

gulp 外掛庫

1.自動載入 gulp-load-plugins

安裝: npm install --save-dev gulp-load-plugins

在使用gulp外掛時都需要require進來 而這個外掛很好的解決了這個問題

gulp-load-plugins並不會一開始就載入所有package.json裡的gulp外掛，而是在我們需要用到某個外掛的時候，才去載入那個外掛。

因為gulp-load-plugins是通過你的package.json檔案來載入外掛的，所以必須要保證你需要自動載入的外掛已經寫入到了package.json檔案裡，並且這些外掛都是已經安裝好了的

下面這是一段一段很方便使用其他外掛的load-plugins程式碼(其實就是匹配到package.json裡的外掛):

var plugins = require("gulp-load-plugins")({
  pattern: [`gulp-*`, `gulp.*`],
  replaceString: /gulp[-.]/
});

這樣就可以通過 plugins.name()來使用我們的外掛 舉一個簡單的使用gulp-rename這個外掛的例子

gulp.task(`one`,function () {
    gulp.src(paths.styles.src+`/one.css`)
        .pipe(plugins.rename(`new.css`)) //而不用宣告類似var rename = require(`gulp-rename`)
        .pipe(gulp.dest(paths.styles.dest));
});

2.重新命名gulp-rename

安裝：npm install --save-dev gulp-rename

var rename = require(`gulp-rename`);
//最後將src/styles/one.css 生成到 assets/styles/new.css
gulp.task(`one`,function () {
    gulp.src(`src/styles/one.css`)
        .pipe(rename(`new.css`))
        .pipe(gulp.dest(`asstes/styles`));
});

3.js檔案壓縮 gulp-uglify

安裝：npm install --save-dev gulp-uglify

var gulp = require(`gulp`),
    uglify = require("gulp-uglify");
 
gulp.task(`minify-js`, function () {
    gulp.src(`src/scripts/*.js`) // 要壓縮的js檔案
    .pipe(uglify())  //使用uglify進行壓縮
    .pipe(gulp.dest(`assets/js`)); //壓縮後的路徑
});

4.檔案合併 gulp-concat

安裝：npm install --save-dev gulp-concat

var gulp = require(`gulp`),
    concat = require("gulp-concat")
    uglify = require("gulp-uglify");
 
//如果src/scripts下有one.js two.js three.js  那麼最後合併到assets/js/all.js
gulp.task(`concat`, function () {
    gulp.src(`src/scripts/*.js`)  //要合併的檔案
    .pipe(uglify())  //使用uglify進行壓縮
    .pipe(concat(`all.js`))  // 合併匹配到的js檔案並命名為 "all.js"
    .pipe(gulp.dest(`assets/js`));
});

5.less和sass的編譯

安裝：npm install --save-dev gulp-less npm install --save-dev gulp-sass

var gulp = require(`gulp`),
    less = require("gulp-less");
 
gulp.task(`compile-less`, function () {
    gulp.src(`src/less/*.less`)
    .pipe(less())
    .pipe(gulp.dest(`assets/css`));
});

當然還有其他非常有用外掛 gulp 外掛庫

相關資料參考於:

相關文章