Gulp Bower wiredep не поднимает bootstrap.css?

У меня есть файл index.html. В моем файле bower.json у меня есть зависимость:

"bootstrap": "~3.3.2"

В файле gulp у меня есть:

  gulp.src('./main.html')
    .pipe(wiredep({
      bowerJson: require('./bower.json')
    }))
    .pipe(gulp.dest('./'));

Когда я это делаю, я вижу все сгенерированные css и js, но не вижу, чтобы bootstrap.css включался где угодно внутри инъекции, другие зависимости. Что происходит?

Я полагаю, что для этого должно быть простое исправление? Или у gulp есть проблемы с этим по сравнению с grunt?

Обновление: я получаю ****, брошенный на меня в фанатике хардкора maven о том, как bower и node отстойны по сравнению с maven, и как после установки bower вам нужно вручную изменить файл bower.json пакета после он загружается. Если есть какой-то способ законно не модифицировать bower.json или способ включить это в процесс сборки, где не нужно требовать от разработчика этого сделать... пожалуйста, обновите!

Ответы

Ответ 1

После того, как я изменил файл bower.json в корне, который изначально указывал на файл *.less, на следующее:

"main": ["dist/css/bootstrap.css"],

Теперь он работает.

Примечание: я удалил запись для bootstrap.js, потому что мне она не нужна.

Ответ 2

Вместо замены/модификации бутстрапа bower.json мы можем переопределить основной объект в проекте bower.json.

"overrides":{
"bootstrap":{
  "main":[
  "dist/js/bootstrap.js",
  "dist/css/bootstrap.min.css",
  "less/bootstrap.less"
  ]
}}

Это работает для меня!

Ответ 3

Да, как сказал @Helzgate, bootstrap рассматривает bootstrap.less как файл стиля по умолчанию вместо bootstrap.css, вы можете проверить это, выбрав p >

bower_components/самозагрузки/bower.json

то вы можете ясно видеть, что главный атрибут имеет следующее значение:

main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ]

так что все, что вам нужно сделать, это заменить less/bootstrap.less на dist/css/bootstrap.css следующим образом:

"main": [
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
  ]

и VOILA, это он.

Ответ 4

Это проблема с последней версией Bootstrap, 3.3.5. Для получения дополнительной информации см. Следующую проблему GitHub:

https://github.com/twbs/bootstrap/issues/16663

Другими словами, он должен работать до версии 3.3.4.

Обязательно укажите фактическую версию, которую вы хотите использовать в Bower; используя ~ 3.3.2 в вашем bower.json после того, как 3.3.5 уже установлен, все равно сделает Bower resort до 3.3.5, просто измените это на 3.3.2 вместо ~ 3.3.2, и вы станете золотым

Ответ 5

вы можете установить переопределение в опции wiredep следующим образом:

gulp.task('bower',['inject-js'],function(){
return gulp.src('./www/index.html')
    .pipe(wiredep({
        "overrides" : {
            "bootstrap":{
                "main":[Set the path to any thing you like]
            }
        },
        directory:'./www/lib/'
    }))
    .pipe(gulp.dest('./www'));
});

Ответ 6

Вы можете использовать до Bootstrap 3.3.4. После этого не вводится css. Только JS. Все это подробно упоминается в https://github.com/twbs/bootstrap/issues/16663. Вероятно, потребуется некоторое время, прежде чем это будет разрешено. На сегодняшний день он до сих пор не разрешен. Дело в том, что wiredep прекрасно работает с моим рабочим процессом. Единственное, что работает, - это gulp -inject, но тогда gulp и gulp не подходят для Bootstrap.