Bootstrap JavaScript 和 Gulp

Question

我是 gulp 的新手，想将 bootstrap 添加到我的项目中。我已经添加了 SASS Bootstrap。那没问题，因为我找到了一份很好的文档。现在我还需要将 bootstrap 的 javascript 添加到我的项目中。我尝试遵循 this 文档，并在正文末尾将 API 添加到我的 index.html 中。像这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

但是我不会工作。我必须在额外的 js 中包含 bootstrap.js 吗？就像我将 bootstrap.sass 导入 main.sass?

我找不到好的文档，现在不知道该怎么办。

Answer 1

查看此设置指南以使用 Bower 和 Gulp 配置 Bootstrap Sass。

Setting up Gulp, Bower, Bootstrap Sass, & FontAwesome (Barnes, Eric L.)

您应该将所有 CSS（包括 third-party 库）编译成一个缩小的 CSS 文件。节省带宽（和加载时间）并使人们更难对您的网站进行逆向工程。

凉亭

bower install bootstrap-sass-official --save

{
  "devDependencies": {
    "gulp":           "3.9.1",
    "gulp-bower":     "0.0.13",
    "gulp-notify":    "3.0.0",
    "gulp-ruby-sass": "2.1.1"
  }
}

NPM

npm install gulp gulp-ruby-sass gulp-notify gulp-bower --save-dev

Gulp

var gulp   = require('gulp'),
    sass   = require('gulp-ruby-sass'),
    notify = require("gulp-notify"),
    bower  = require('gulp-bower');

var config = {
    sassPath : './resources/sass',
    bowerDir : './bower_components'
}

gulp.task('bower', function() {
  return bower().pipe(gulp.dest(config.bowerDir))
});

gulp.task('css', function() {
  return gulp.src(config.sassPath + '/style.scss')
    .pipe(sass({
        style: 'compressed',
        loadPath: [
          './resources/sass',
          config.bowerDir + '/bootstrap-sass-official/assets/stylesheets'
        ]
      })
      .on("error", notify.onError(function(error) {
        return "Error: " + error.message;
      })))
    .pipe(gulp.dest('./public/css'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(config.sassPath + '/**/*.scss', ['css']);
});

gulp.task('default', ['bower', 'css']);

Sass

/*
 *  File: style.scss
 */
// Import Bootstrap
@import "bootstrap";

// ...

Answer 2

是的，您还必须导入 bootstrap.js。重要的是将其导入 HTML.

的头部

Bootstrap JavaScript 和 Gulp

Bootstrap JavaScript with Gulp

javascript

sass

twitter-bootstrap

gulp

gulp-sass

凉亭

NPM

Gulp

Sass