求协助配置Brunch适配Polymer 2.0 Starter Kit及相关依赖

我明白你想用Brunch替代polymer serve，同时集成browser-sync、fb-flo这类实用功能，核心卡在了index.html无法复制到public目录的问题上。下面给你一套完整的可落地配置方案：

第一步：安装必要依赖 #

首先在项目根目录执行以下命令，安装Brunch核心及所需插件：

npm install --save-dev brunch copycat-brunch browser-sync-brunch fb-flo-brunch

• copycat-brunch：负责静态文件（包括index.html、bower_components）的复制
• browser-sync-brunch：提供浏览器同步刷新功能
• fb-flo-brunch：支持无需刷新页面的实时资源注入

第二步：完整的brunch-config.coffee配置 #

创建或替换项目根目录的brunch-config.coffee，内容如下：

module.exports =
  paths:
    watched: ['app', 'bower_components']
    public: 'public'

  files:
    javascripts:
      joinTo:
        'js/app.js': /^app/
        'js/vendor.js': /^(bower_components)/
    stylesheets:
      joinTo: 'css/app.css'
    templates:
      joinTo: 'js/app.js'

  plugins:
    copycat:
      # 关键：指定要复制到public目录的文件和目录
      '': ['index.html']
      'bower_components': ['bower_components/**/*']
      verbose: true # 可选：开启复制日志，方便调试

    browserSync:
      port: 8080 # 和polymer serve默认端口保持一致，可选调整
      open: true # 启动时自动打开浏览器
      ghostMode:
        clicks: true
        scroll: true
        forms: true

    fbFlo:
      enabled: true
      files: [
        {
          pattern: /public\/bower_components\/.*\.html/
          reload: true
        },
        {
          pattern: /public\/app\/.*\.html/
          reload: true
        }
      ]

  # 禁用默认的HTML处理，交给copycat处理
  conventions:
    assets: /^(index.html|bower_components)/

第三步：关键配置解释 #

1. 解决index.html复制问题：

   • 通过copycat插件的''目标路径，直接将根目录的index.html复制到public根目录
   • 同时把bower_components整个目录复制到public下，保证Polymer的HTML导入路径正确

2. Polymer依赖处理：

   • 将bower_components加入watched路径，确保文件变动时Brunch能监听
   • 通过conventions.assets把bower_components标记为静态资源，避免被错误打包

3. 功能集成：

   • browser-sync配置保持和polymer serve类似的体验，支持跨设备同步
   • fb-flo配置监听Polymer组件文件变动，实现无刷新更新

第四步：启动服务 #

执行以下命令启动Brunch开发服务器：

brunch watch --server

现在你应该能看到index.html成功复制到public目录，同时浏览器自动打开并加载页面，修改组件或index.html时会自动刷新或热更新。

如果遇到路径问题，可以检查copycat的verbose日志，确认文件是否正确复制；另外确保Polymer组件里的导入路径是相对public目录的（比如../bower_components/polymer/polymer.html这类路径保持不变即可）。

内容的提问来源于stack exchange，提问作者Baptiste Coulon