Pytanie Pliki czcionek do Bootstrap 3.0 z Brunch


Chciałbym dołączyć pliki czcionek do glifów typu Bootstrap 3.0 (aka, glyphicons-halflings-regular.woff, .ttf, .svg). Bower skutecznie je ściąga i dodałem je do sekcji "przesłonięcia" pliku bower.json w mojej aplikacji:

"bootstrap": {
  "main": [
    "dist/js/bootstrap.js",
    "dist/css/bootstrap.css",
    "dist/fonts/glyphicons-halflings-regular.woff",
    "dist/fonts/glyphicons-halflings-regular.ttf",
    "dist/fonts/glyphicons-halflings-regular.svg"   
  ],

Ale o ile mogę powiedzieć, nie ma to żadnego wpływu. Możliwe, że może potrzebuję zmusić altankę do aktualizacji, ponieważ nie było aktualizacji wersji Bootstrap, ponieważ dodałem odniesienia do plików czcionek. Poza tym nie mam pojęcia, jak zdobyć Brunch, aby umieścić te pliki w ./public/fonts informator.


11
2017-09-20 15:28


pochodzenie




Odpowiedzi:


Skopiuj je ręcznie do app/assets lub tak. Brunch nie pobiera obecnie plików z altany, szukamy dobrego sposobu na zrobienie tego.


8
2017-09-21 10:15



Ok, byłoby fajnym dodatkiem do wbudowania w Bower, ale mogę teraz pracować z tym ręcznie. Dziękujemy i czekamy na rozwiązanie, które wymyślicie. BTW, czy istnieje uchwyt Twittera, kanał RSS lub cokolwiek innego, co mogę dostroić, aby otrzymywać aktualizacje Brunch? - ken
@brunch twitter - Paul Miller
Ten sam dokładny problem, byłoby miło mieć! Może inny "typ" obok "javascripts / stylesheets / templates"? - Dominic Tancredi


Zostało to przetestowane i działa z brunchem 1.8.3.

Najlepszym sposobem na rozwiązanie tego problemu z bootstrapem i innymi bibliotekami z zasobami czcionek jest:

1) Po pierwsze, zaktualizuj swój plik bower.json przesłonięciem dla bootstrap (lub innej biblioteki). Poniżej widać, że główny został zaktualizowany do bootstrap, a teraz brunch ma dostęp do plików czcionek, js i css.

{
  "name": "Example",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "3.3.x",
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js",
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.woff",
        "dist/fonts/glyphicons-halflings-regular.woff2"
      ],
      "dependencies": {
        "jquery": ">= 1.9.1"
      }
    }
  }
}

2) Zaktualizuj konwencje dla zasobów w pliku brunch-config.js. Możesz użyć funkcji do tworzenia dostosowanych konwencji. Poniższa funkcja ma 2 wyrażenia regularne odpowiadające domyślnemu testowi dla zasobów i nowy dodany dla plików czcionek. Możesz dodać więcej instrukcji regex do swoich potrzeb.

exports.config = {
  conventions: {
    assets: function(path) {
      /**
       * Loops every path and returns path|true|false according what we need
       * @param   path    file or directory's path
       * @returns path    if it is a directory
       *          true    if it fit with the regular expression
       *          false   otherwise
       *
       */
      if( /\/$/.test(path) ) return path;
      // /^app\/.*\.html/.test(path) ||
      // RegExp for anything we need
      return /assets[\\/]/.test(path) 
            || /.*(?:\.eot|\.svg|\.ttf|\.woff2|\.woff)/.test(path); 
    }
  }
};
  1. Użyj wtyczki po brunchu, aby skonfigurować poprawną strukturę plików czcionek.

    exports.config = {
      stylesheets: {
        joinTo: {
          'styles/app.css': /^styles/,
          'styles/vendor.css': /^(vendor|bower_components)/,
        }
      },
      conventions: {
        assets: function(path) {
          /**
           * Loops every path and returns path|true|false according what we need
           * @param   path    file or directory's path
           * @returns path    if it is a directory
           *          true    if it fit with the regular expression
           *          false   otherwise
           *
           */
          if( /\/$/.test(path) ) return path;
          // /^app\/.*\.html/.test(path) ||
          // RegExp for anything we need
          return /assets[\\/]/.test(path) 
                || /.*(?:\.eot|\.svg|\.ttf|\.woff|\.woff2)/.test(path); 
        }
      },
      plugins: {
        afterBrunch: [
         [
           'mkdir public/fonts -p',
           'mv public/bootstrap/dist/fonts/* public/fonts',
           'rm -r public/bootstrap',
         ].join(' && ')
      ]
     }
    };
    

Zauważ w powyższym kodzie, że css i czcionki są umieszczone w określonych katalogach, jest to potrzebne, aby działał poprawnie, ponieważ css odnosi się do czcionek w określonej lokalizacji:

  src: url('../fonts/glyphicons-halflings-regular.eot');

1
2018-06-26 20:06



plus-jeden do rozwiązania. Gdybym mógł dać plus-dwa, byłby za używanie wielu wyrażeń regularnych. Lub regexi, jak je nazywają. - Dominic Tancredi
Zapomniałem o jednej rzeczy, sprawdź zaktualizowany krok trzeci powyżej. - user13653