使用 gulp 设置 Bootstrap SASS 的 Jquery 问题

Question

我正在尝试设置一个项目，该项目将使用 twitter 引导程序编译我的 sass 文件。

我的项目如下所示：

我的 gulpfile 看起来像这样：

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var bootstrap = require('bootstrap-sass');
var jquery = require('jquery');

// config
var config = {
    sassInput: 'sass',
    sassOutput: 'public/css'
}

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src(config.sassInput + 'scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest(config.sassOutput));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['sass', 'watch']);

当我尝试运行“gulp”时出现此错误

Error: Bootstrap's JavaScript requires jQuery
    at Object.<anonymous> (G:\Project\node_modules\bootstrap-sass\assets\javascripts\bootstrap.js:8:9)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (G:\Project\gulpfile.js:7:17)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)

如何从引导程序中提供对 jQuery 的引用？这是我第一次使用 gulp，我不知道该怎么做。

谢谢。

Answer 1

这里有两种主要方法：

• 首先是通过页面中的纯 css 标签导入在引导程序中加载。 然后加载你编译的 sass 文件。 但我可以想象那不是你想要的。

• 其次是通过包含路径或加载路径加载到引导路径中。例子：

example 1
    .pipe(sass({
        includePaths: [
            require("node-bourbon").includePaths,
            require("node-neat").includePaths[1],
            require("node-normalize-scss").includePaths,
            config.path.bower + config.path.fontAwesome
        ],
        importer: jsonImporter,
        outputStyle: config.sass.style
    }))

example 2
    .pipe(sass({
        style: 'compressed',
        loadPath: [
            './resources/sass',
            config.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
            config.bowerDir + '/fontawesome/scss',
        ]
    })


您的 jquery 错误只是因为您需要整个引导程序 npm 包。在顶部。我想这不是你想要的。