包括 Gulp 的引导程序

Question

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

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

根据您的实际设置，还需要将引导 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-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

glyphicons-halflings-regular.woff2