Web前端自動化建構（四）—— Bower 依賴管理（Bower內建Gulp的兩種方式）

全名：《Web前端自動化建構 Gulp、Bower和Yeoman開發指南》

作者：Stefan Banumgartner【奧】

譯者：談博文

Bower可以管理項目的依賴，因而我們可以不再使用本地下載下傳好的vendor，因為這個檔案夾可能存在老版本的元件。原完整gulpfile.js，請參照Web前端自動化建構（三）——用Gulp配置本地開發環境。

下面，我們将一個存在于‘./scripts/vendor’目錄下的jquery，通過bower安裝，并使用gulp把依賴和項目自動內建。

方法一:使用wiredep插件，用gulp把依賴內建到應用中

1. 删除vendor中的jquery，并使用bower安裝： 2. 引入wiredep

wiredep插件會讀取bower.json檔案中的内容，擷取到碧瑤以來的主檔案的路徑，然後注入到html檔案中。

首先，删除index.html中的

<script src="scripts/vendor/jquery.js"></script>

,

同時在相同位置加入如下标記：

<!-- bower:js --> <!-- endbower -->

wiredep會在這兩個注釋之間引入bower檔案路徑。

3.修改gulpfile.js

添加新的deps task，如下：

const wiredep = require('wiredep').stream;

...

gulp.task('deps', () => {
    return gulp.src('./app/index.html')
        .pipe(wiredep())
        .pipe(gulp.dest('dist'));
})
           

同時修改在default task中加入deps task，

gulp.task('default',
    gulp.series('clean',
        gulp.parallel('styles', 'scripts','deps'),
        'server',
       ...
    )
)
           

此時，運作

gulp

，會在dist檔案夾下生成新的index.html檔案，index.html中加入如下代碼：

<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
           

現在隻需要簡單的運作

bower update jquery

，就可以簡單平滑的更新jQuery依賴，新的依賴也可以自動內建到項目裡，不需要手動下載下傳操作。

方法二：使用main-bower-files插件，把依賴內建到建構流程中

使用main-bower-files會傳回一個由檔案路徑組成的數組。根據這些路徑，我們可以把相應的依賴檔案添加到建構pipe中。

然後聲明一個glob變量，讓它同時包含依賴和自己的代碼，最終通過建構pipe，傳回一個檔案。

首先，安裝

main-bower-files

：

然後，修改gulpfile.js的script task，

const mainBowerFiles = require('main-bower-files');     //引入子產品
...

gulp.task('scripts',
    gulp.series('test', function scriptsInternal() {
        let glob = mainBowerFiles('**/*.js');         //聲明glob變量       
        glob.push('./app/scripts/*.js');              //把自己的代碼比對規則添加到數組中
        return gulp.src(glob)                         //把數組傳遞給gulp.src()
            .pipe(concat('main.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('dist/scripts'));
    })
);
           

現在執行

gulp scripts

，就可以把所有安裝的JavaScript元件也包括到

main.min.js

中去了。

未完待續。。。

下一章中，會根據現在的Bower和Gulp配置，讓這個項目可以在更多新項目中複用。