Grunt & Bower & grunt-Wiredep

Я привязался к совместному использованию grunt и bower. Для вставки компонентов bower непосредственно в index.html используется grunt-wiredep.

Но есть одна проблема, некоторые зависимости, которые присутствуют в bower.json, до сих пор не включены в * .html.

bower.json

{
  "name": "***",
  "version": "***",
  "dependencies": {},
  "devDependencies": {
    "jquery": "~2.1.1",
    "angular": "1.4.x",
    "bootstrap": "~3.1.1",
    ...
  },
  "resolutions": {
    ..
  }
}

gruntfile.js

....
wiredep: {

      task: {
        src: [
          'app/index.html'
        ],
        options: {
          dependencies: true,
          devDependencies: true          
        }
      }
    }
...

index.html

...

<!-- bower:js -->
<!-- endbower -->

<!-- bower:css -->
<!-- endbower -->

...

В результате я не включил скрипты для jquery, angular, bootsrap и css для начальной загрузки. Но были включены некоторые другие источники.

Проблема не в свойстве main внутри bower.json как здесь

После некоторого расследования я обнаружил проблему с начальной загрузкой 3.3.x

Но блок "overrides" в моем bower.js не помогает.

Одна вещь кажется очень интересной: (то же самое для bootstarp)

после добавления

"jquery": {
      "main": "D:/REPO/XX/current/bower_components/jquery/dist/jquery.js"
    }

к блоку переопределяет, wiredep включил следующее в index.html

<script src="../bower_components/jquery/D:/REPO/XX/current/bower_components/jquery/dist/jquery.js"></script>

Но когда я написал "main": "dist/jquery.js", это просто игнорируется


bower gruntjs grunt-wiredep
person anastsiacrs    schedule 02.02.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Мне кажется, у вас проблемы со структурой вашего проекта. Используйте параметр cwd. Я успешно настроил Wiredep для добавления необходимых зависимостей с помощью config:

wiredep: {
    task: {
        src: [
            '<%= cfg.webapp_dir %>/index.html'
        ],
        cwd: '.',
        overrides': {
            'bootstrap': {
                'main': ['less/bootstrap.less', 'dist/css/bootstrap.min.css', 'dist/js/bootstrap.min.js']
            }
        },
        fileTypes: {
            html: {
                replace: {
                    js: '<script src="/{{filePath}}"></script>',
                    css: '<link rel="stylesheet" href="/{{filePath}}" />'
                }
            }
        }
    }
}

это также включает бутстрап overrides, который работает безупречно :) В моем случае папка bower_dependencies находится в том же каталоге, что и index.html.

person Atais    schedule 02.02.2016
comment
Большое спасибо! Проблема была на самом деле в структуре проекта. Я поставил bower_dependencies и index.html на один уровень - и это помогло. - person anastsiacrs; 03.02.2016
comment
Но мне кажется довольно странным, что обработанный файл (index.html) и _2 _ + _ 3_ должны находиться на одном уровне. [cwd как я вижу, это путь к _5 _ + _ 6_] - person anastsiacrs; 03.02.2016
comment
Думаю, это не могло быть в другом каталоге, кроме вашего index.html. В конце концов, сервер должен обслуживать все библиотеки, включенные в bower_components, а поскольку он также обслуживает файл index, путь должен быть таким же. Если вы не хотите минимизировать все библиотеки, в таком случае (я делаю это только для производственной сборки) вы можете удалить bower_components в конце процесса сборки. - person Atais; 03.02.2016