Jquery问题设置Bootstrap SASS与gulp

时间:2016-01-06 08:45:09

标签: twitter-bootstrap gulp bootstrap-sass gulp-sass

我正在尝试设置一个项目,使用twitter bootstrap编译我的sass文件。

我的项目如下:

enter image description here

我的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)

如何从bootstrap提供jQuery的引用?这是我第一次使用gulp,我不知道该怎么做。

感谢。

1 个答案:

答案 0 :(得分:0)

这里有两种主要方法:

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

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

&#13;
&#13;
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',
        ]
    })

&#13;
&#13;
&#13;

你的jquery错误只是因为你需要整个bootstrap npm包。在顶部。这不是你想要的。