Separating app and vendor css in Brunch

问题

My Brunch template compiles all my code into app.js and all third party dependencies into vendor.js (a pretty standard approach). I'd like to do the same with CSS and it used to work but as I moved to using Bower something stopped working and I now get the following error:

Error: couldn't load config /path-to-root/config.coffee. SyntaxError: unexpected { at Object.exports.loadConfig (/usr/local/share/npm/lib/node_modules/brunch/lib/helpers.js:448:15)

from a configuration file (config.cofee) that looks like this:

files:
    javascripts:
      joinTo: 
        'javascripts/app.js': /^app/
        'javascripts/vendor.js': /^(bower_components|vendor)/
        'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/

    stylesheets:
      joinTo:
        'stylesheets/app.css': /^app/
        'stylesheets/vendor.css': /^(bower_components|vendor)/

If I instead just strip out the two lines for stylesheets and put this single line in its place it works without error:

'stylesheets/vendor.css': /^(app|bower_components|vendor)/

I've been sort of living with this but this is causing more and more problems and I'd like to get it sorted. Any help would be greatly appreciated.

In case the question comes up ... the version of brunch I'm using is 1.7.6.

回答1:

I am baffled but I think Paul's suggestion that maybe a special character had gotten into the file seems likely. I now have it working with a configuration that appears to be identical to what was NOT working earlier. Here's the full configuration file:

sysPath = require 'path'

exports.config =
  # See http://brunch.io/#documentation for documentation.
  files:
    javascripts:
      joinTo:
        'javascripts/app.js': /^app/
        'javascripts/vendor.js': /^(bower_components|vendor)/
        'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/

    stylesheets:
      joinTo: 
        'stylesheets/app.css': /^app/
        'stylesheets/vendor.css': /^(bower_components|vendor)/

    templates:
      precompile: true
      root: 'templates'
      joinTo: 'javascripts/app.js' : /^app/

      modules:
        addSourceURLs: true

  # allow _ prefixed templates so partials work
  conventions:
    ignored: (path) ->
      startsWith = (string, substring) ->
        string.indexOf(substring, 0) is 0
      sep = sysPath.sep
      if path.indexOf("app#{sep}templates#{sep}") is 0
        false
      else
        startsWith sysPath.basename(path), '_'

回答2:

It's pretty weird but I had to do the following (add / at the end) for the same case

stylesheets: {
    joinTo: {
        'css/vendor.css': /^(vendor|bower_components)\//,
        'css/styles.css': /^app\/css\//
    }
}

回答3:

I had the same problem as Ken. What solved it for me is just deleting the offending lines from the config.coffeefile and simply just re-typing them again from scratch. This ensures no hidden characters are present and makes the script running again.

来源：https://stackoverflow.com/questions/18934237/separating-app-and-vendor-css-in-brunch

标签

Brunch