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'))})

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