Gulp 合并来自 npm 的 Javascript的资源 DAY96

在载入 bootstrap 的 js之前

我们可以看到
https://getbootstrap.com/docs/4.5/getting-started/introduction/
它有三支 js 要载入(jquery,popper,bootstrap)

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>

但第4版後 有一个 bundle版本
包含(popper与bootstrap)
所以我们可以在 vendorJS 新增

gulp.task('vendorJS',['bower'],function(){
    return gulp.src([
        './.tmp/vendors/**/**/*.js',
        // 新增内容
        './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
        ])
        .pipe($.order([
            'jquery.js',
            'bootstrap.js'
        ]))
        .pipe($.concat('vendors.js'))
        .pipe($.if(option.env === 'production',$.uglify()))
        .pipe(gulp.dest('./public/js'))
});

当然 如果你不需要 bower的 jquery
也可以利用npm 来安装
那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷