saint

Brunch not automatically build

Hello,
I am using React on the Front-end, every time i made the changes it does not automatically build. I always type build brunch on the assets folder.

this is my brunch.config.js

exports.config = {
// See Brunch - ultra-fast HTML5 build tool 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": /^js/,
  //   "js/vendor.js": /^(?!js)/
  // }
  //
  // To change the order of concatenation of files, explicitly mention here
  // order: {
  //   before: [
  //     "vendor/js/jquery-2.1.1.js",
  //     "vendor/js/bootstrap.min.js"
  //   ]
  // }
},
stylesheets: {
  joinTo: "css/app.css"
},
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 “/assets/static”. Files in this directory
// will be copied to paths.public, which is “priv/static” by default.
assets: /^(static)/
},

// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [“static”, “css”, “js”, “vendor”],
// Where to compile files to
public: “../priv/static”
},

// Configure your plugins
plugins: {
babel: {
presets: [“es2015”, “react”],
// Do not use ES6 compiler in vendor code
ignore: [/web/static/vendor/]
}
},

modules: {
autoRequire: {
“js/app.js”: [“js/app”]
}
},

npm: {
enabled: true,
whitelist: [“phoenix”, “phoenix_html”, “react”, “react-dom”]
}
};

Package.json

{
“repository”: {},
“license”: “MIT”,
“scripts”: {
“deploy”: “brunch build --production”,
“watch”: “brunch watch --stdin”
},
“dependencies”: {
“axios”: “^0.17.0”,
“babel-preset-react”: “^6.24.1”,
“phoenix”: “file:../deps/phoenix”,
“phoenix_html”: “file:../deps/phoenix_html”,
“react”: “^16.0.0”,
“react-dom”: “^16.0.0”,
“react-router-dom”: “^4.2.2”
},
“devDependencies”: {
“babel-brunch”: “6.1.1”,
“brunch”: “2.10.9”,
“clean-css-brunch”: “2.10.0”,
“uglify-js-brunch”: “2.10.0”
}
}

4 comments

/phoenix #brunch

0 2797 4

2017-11-02 13:33:52 UTC

Marked As Solved

peerreynders

Is it possible that is only what you think is happening? In brunch-config.js:

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],

This is watching for modifications to the files under assets/static, assets/css, assets/js, assets/vendor. So nothing will happen if you make modifications to files that are not under those folders.

http://brunch.io/docs/config#-paths-

Now app.js is in assets/js but:

  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": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }

This is still the default configuration - it specifies the file the JS bundle is based on but it hasn’t been customized to “join other files to it” as is being alluded to in the comments. So Brunch can only go by the imports and requires inside app.js to determine when the bundle needs to be rebuilt (as far as I understand it) - so app.js is only going to be rebuilt (and reloaded) when those known dependencies are modified.

http://brunch.io/docs/config#-files-
http://brunch.io/docs/config#pattern-matching

Now what triggers the live reload is that Brunch updates priv/static/js/app.js in response to the JS bundle being rebuilt. So if are updating JS files under assets that don’t trigger a bundle rebuild, no reload will happen.

Reloads only happen when files matching the configured patterns are updated:

# Watch static and templates for browser reloading.
config :jslib, JslibWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
      ~r{priv/gettext/.*(po)$},
      ~r{lib/my_app/views/.*(ex)$},
      ~r{lib/my_app/templates/.*(eex)$}
    ]
  ]

Post #3