Gulp bower(2) DAY86

今天要来介绍 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']);

不过这里其实流程是错误的

可以尝试把 .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'))
})

那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷