Question

我正在尝试设置一个项目，使用twitter bootstrap编译我的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)

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

感谢。

Answer 1

这里有两种主要方法：

首先通过页面中的普通css标签导入加载bootstrap。然后在此之后加载已编译的sass文件。但我可以想象那不是你想要的。
其次是通过包含路径或加载路径加载引导路径。例子：

＆＃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;

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

Jquery问题设置Bootstrap SASS与gulp

1 个答案: