iT邦幫忙

0

Gulp 合併來自 npm 的 Javascript的資源 DAY96

  • 分享至 

  • xImage
  •  

在載入 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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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 來安裝
那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言