phoenix中使用静态资源

以前用过rails开发web应用，可以直接将静态资源复制到指定文件夹即可，最近学习phoenix，通过研究其目录结构，发现在其项目中包含 /web/static/assets文件夹，猜测可以将静态文件直接复制到此文件夹中便可访问，但经测试发现行不通，于是查阅其 官方的文档，phoenix与rails不同，需要安装 Brunch 插件来实现对静态资源的管理与引入，对于第三方的js库可以放到/web/static/vender文件夹中，或是通过配置/package.json文件的devDependencies项进行引用：

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html"
  },
  "devDependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "2.7.4",
    "clean-css-brunch": "~2.0.0",
    "css-brunch": "~2.0.0",
    "bootstrap": "3.3.6",
    "admin-lte": "~2.3.8",
    "javascript-brunch": "~2.0.0",
    "uglify-js-brunch": "~2.0.1",
    "jquery": ">= 2.1"
  }
}

配置完成后，执行 npm install 安装所添加的JS库，但对第三方库如何在页面中调用却一直看不太明白，官方文档说是需要修改Brunch的配置文件 brunch-config.js来实现，

npm: {globals: {
    $: 'jquery',
    jQuery: 'jquery'
  }},

以上是配置js

npm: {styles: {
    
bootstrap: ['dist/css/bootstrap.min.css']
  }},

以上是配置css样式

配置css样式时，在styles节中，“：”前是指node-module的名称，后面为需要引入的文件列表，以bootstrap为例，如果需要引入单个文件时，按下面方法设置：

bootstrap: ['dist/css/bootstrap.min.css']

当需要引入多个css文件时，按下面方法设置：

bootstrap: ['dist/css/bootstrap.css', 'dist/css/bootstrap.min.css']

对于node-module包含特殊字符时，可以将node-module名称包含在引号中，如：

"admin-lte": ['dist/css/AdminLTE.min.css','dist/css/skins/skin-blue-light.min.css']

以下是完整的brunch-config.js文件：

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"


      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //  "js/app.js": /^(web\/static\/js)/,
      //  "js/vendor.js": /^(web\/static\/vendor)|(deps)/,
      //  "js/bootstrap.js": /^(web\/static\/static\/vendor\/js)/
      // },
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     // "web/static/vendor/js/jquery-2.1.1.js",
      //     "web/static/vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
      bootstrap: 'bootstrap',
      adminlte: 'admin-lte'
    },
    styles: {
      bootstrap: ['dist/css/bootstrap.min.css'],
       "admin-lte": ['dist/css/AdminLTE.min.css','dist/css/skins/skin-blue-light.min.css']
    }
  }
};