Question

我正在开发一个项目，它使用gulp为项目构建javascript和css，并需要bootstrap。虽然导入部分有效，但我在页面加载时遇到了很多与字体相关的错误。这就是我试过的：

gulp.task('scripts', function(){
    pump([
        gulp.src(
            [
                'path/to/jquery.js',
                'bower_components/bootstrap/dist/js/bootstrap.min.js',

.... ....

gulp.task('sass', function () {
    return gulp.src(
        [
            'bower_components/bootstrap/dist/css/bootstrap.css',

同样，虽然默认的引导程序样式和javascript似乎包含在项目中，但我收到类似于下面的错误。有任何想法如何解决这个问题？

TS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: http://my.domain.com/fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb

Answer 1

根据您的实际设置，您的bootstrap glyphicons也需要添加到/ dist / fonts中以便在运行时调用。因为在使用gulp-sass时它们不包含在bootstrap-sass构建周期中。

<强>的package.json

"devDependencies": {


"gulp": "^3.9.1",

"gulp-autoprefixer": "^3.1.1",

"gulp-concat": "^2.6.0",

"gulp-imagemin": "^3.0.3",

"gulp-newer": "^1.2.0",

"gulp-rename": "^1.2.2",

"gulp-sass": "^2.3.2",

"gulp-sourcemaps": "^1.6.0",

"gulp-uglify": "^2.0.0"

},

<强> Gulpfile

// ////////////////////////////////////////////////
//
// CONFIG
// 
// jsConcatFiles => list of javascript files (in order) to concatenate
// // //////////////////////////////////////////////

var config = {
    jsConcatFiles: [
        './src/scripts/js/jquery.js',
        './src/scripts/js/bootstrap.js',    
    ], 

};


var gulp = require('gulp'),
    sass = require('gulp-sass'),
    newer = require('gulp-newer'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),


// ////////////////////////////////////////////////
// Scripts Tasks
// ///////////////////////////////////////////////

gulp.task('scripts', function() {
  return gulp.src(config.jsConcatFiles)
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(gulp.dest('src/scripts/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('public_html/scripts/js/'))
    .pipe(reload({stream:true}));
});


// ////////////////////////////////////////////////
// Styles Tasks
// ///////////////////////////////////////////////

gulp.task('styles', function() {
    gulp.src('src/scripts/scss/styles.scss')

        .pipe(rename('all-styles.css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public_html/scripts/css'))
        .pipe(reload({stream:true}));
});





// ////////////////////////////////////////////////
// Watch Tasks
// // /////////////////////////////////////////////

gulp.task ('watch', function(){
    gulp.watch('src/scripts/scss/**/*.scss', ['styles']);
    gulp.watch('src/scripts/js/**/*.js', ['scripts']);
});


gulp.task('default', ['scripts', 'styles', 'watch']);

还在/ dist / fonts中包含glyphicons。

glyphicons-半身-regular.eot

glyphicons-半身-regular.svg

glyphicons-半身-regular.ttf

glyphicons-半身-regular.woff

glyphicons-半身-regular.woff2

包括Gulp的bootstrap

1 个答案: