как контролировать, как wiredep генерирует путь к файлу Bower и как контролировать, какие файлы добавляются/удаляются

мое приложение имеет каталог следующим образом

приложение -> имя_приложения -> index.html (js, css)

и по какой-то причине эта папка-оболочка appName портит wiredire

{ dest: '.tmp/concat/scripts/vendor.js',
      src: 
       [ '../bower_components/es5-shim/es5-shim.js',
         '../bower_components/angular/angular.js',
         '../bower_components/json3/lib/json3.js',
         '../bower_components/angular-resource/angular-resource.js',
         '../bower_components/angular-cookies/angular-cookies.js',
         '../bower_components/angular-sanitize/angular-sanitize.js',
         '../bower_components/angular-animate/angular-animate.js',
         '../bower_components/angular-touch/angular-touch.js',
         '../bower_components/angular-route/angular-route.js' ] },

это то, что было бы создано, если бы каталог выглядел следующим образом

приложение -> index.html (js, css)

{ dest: '.tmp/concat/scripts/vendor.js',
      src: 
       [ 'bower_components/es5-shim/es5-shim.js',
         'bower_components/angular/angular.js',
         'bower_components/json3/lib/json3.js',
         'bower_components/angular-resource/angular-resource.js',
         'bower_components/angular-cookies/angular-cookies.js',
         'bower_components/angular-sanitize/angular-sanitize.js',
         'bower_components/angular-animate/angular-animate.js',
         'bower_components/angular-touch/angular-touch.js',
         'bower_components/angular-route/angular-route.js' ] },

и wiredep изменяет содержимое сценария index.html, и как я могу контролировать этот поток? иногда он удаляет angular-sanitize из своего скрипта [src]


grunt-wiredep
person user2167582    schedule 29.07.2014    source источник

Ответы (3)


arrow_upward
13
arrow_downward

Вы должны использовать опцию replace в wiredep:

wiredep(
    {
        fileTypes: {
            html: {
                replace: {
                    js: '<script src="/app/appName/{{filePath}}"></script>'
                }
            }
        }
    })

Будет генерировать:

<script src="/app/appName/bower_components/angular/angular.js"></script>
person Michael    schedule 31.07.2015
comment
это лучший ответ - person Developerium; 09.02.2016
comment
Эта «замена» сработала для меня. +1 за комментарий @Kdawgwilk. cwd не для меня. - person SolessChong; 10.10.2016

arrow_upward
9
arrow_downward

Это моя настройка gulp (тот же принцип применим к Grunt, просто передайте ему те же параметры).

gulp.task('wiredep' , function()
{
    return gulp.src('./app/index.html')
           .pipe(wiredep({
               'ignorePath': '../'
           }))
          .pipe(gulp.dest('./app'));
});

Вы можете посмотреть исходный код wiredep в lib/inject-dependencies.js (строка: 80~85)

map(function (filePath) {
    return $.path.join(
      $.path.relative($.path.dirname(file), $.path.dirname(filePath)),
      $.path.basename(filePath)
    ).replace(/\\/g, '/').replace(ignorePath, '');
  }).

Он просто заменяет бит, который вы поставляете (или нет, если вы его не даете).

Надеюсь, это поможет.

person Joel Chu    schedule 23.08.2015

arrow_upward
5
arrow_downward

Вы пытались добавить cwd в блок options?

Ex:

  // Automatically inject Bower components into the app
    wiredep: {
      options: {
        cwd: 'app/appName'
      }
      ....
    }
person Eric B.    schedule 10.08.2014
comment
Я почти уверен, что опция cwd сообщает wiredep, где найти bower.json - person Kdawgwilk; 30.05.2015