Gulp bower(2)

今天要來介紹 gulp 如何與 bower 結合

這裡必須新增一個套件 main-bower-files

https://www.npmjs.com/package/main-bower-files

那如何安裝呢??

npm install main-bower-files --save
var mainBowerFiles = require('main-bower-files');
gulp.task('bower', function() {
    return gulp.src(mainBowerFiles())
        .pipe(gulp.dest('./.tmp/vendors'))
});
gulp.task('default',['jade','sass','babel','bower','watch']);

這時候輸入 gulp
就會發現成功啦~~

不過 實際上
我們應該放在 public 此資料夾內

那要怎麼做呢??
讓我們繼續看下去~~

Gulp 與 Bower 程式碼串接

現在我們要把外部載近來的 js檔案合併
並放在 public資料夾下的js資料夾

gulp.task('vendorJS',function(){
    return gulp.src('./.tmp/vendors/**/**/*.js')
        .pipe($.concat('vendors.js'))
        .pipe(gulp.dest('./public/js'))
});
gulp.task('default',['jade','sass','babel','bower','vendorJS','watch']);

不過這裡其實流程是錯誤的

Get 皮傑先生’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

可以嘗試把 .tmp資料夾 與 public資料夾刪除
並再次輸入 gulp
會發現public/js 竟然沒有vendors.js 這支檔案
再次輸入gulp
它才會出現

為什麼呢???
因為 bower 在把檔案拉進來的時候
它的下一個排程 就開始運作了
那要怎麼解決呢??

// 在執行 vendorJS 前，必須先執行 bower  
gulp.task('vendorJS',['bower'],function(){
    return gulp.src('./.tmp/vendors/**/**/*.js')
        .pipe($.concat('vendors.js'))
        .pipe(gulp.dest('./public/js'))
});
// 這裡要把 bower 刪除
gulp.task('default',['jade','sass','babel','vendorJS','watch']);

這裡再補充一下
並非所有套件對於 bower 的取用都那麼的友善
ex: Vue.js
他不會正確取得 dist 資料夾內的 vue.js

先安裝

bower install vue --save

再加入

"overrides": {
            "vue": {                       
                "main": "dist/vue.js"     
            }
        }

加入畫面:

gulp.task('bower', function() {
    return gulp.src(mainBowerFiles({
        "overrides": {
            "vue": {                       
                "main": "dist/vue.js"     
            }
        }
    }))
        .pipe(gulp.dest('./.tmp/vendors'))
});

另外
外部載入的套件如果需要排序
可以利用 gulp-order 此套件

npm install gulp-order --save

透過陣列排列自己所需要的順序

gulp.task('vendorJs', ['bower'], function(){
  return gulp.src(['./.tmp/vendors/**/**.js'])
    .pipe($.order([
      'jquery.js',
      'bootstrap.js'
    ]))
    .pipe($.concat('vendor.js'))
    .pipe(gulp.dest('./public/javascripts'))
})

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷