Why modifying custom JS files located in /assets/ don't affect the corresponding files in /dist/?

sage
1

Because I needed to have a separate custom JS file in order to do Ajax (see Which handle should I use when calling wp_localize_script()?), I have a scripts.js file in /assets/, which I also see in /dist/. But for some reason when I modify the one in /asset/, the one in /dist/ doesn’t change. Why and how to fix that problem?

2

Which version of Sage are you using and how are you currently trying to compile the assets?

3

Ahem, I was seeking my Sage’s version the other day but I can’t find this info anywhere :expressionless: README.md at the root of the theme seems like the best place for this but it doesn’t show the version of Sage. So I don’t know, it’s a version still using Gulp not Webpack though.

4

No problem. You should see your version number in package.json in the root of your theme. However, you’re using version 8 if you are using Gulp.

Could you list out what you’ve tried so far? Are you saying there’s a scripts.js file in the assets folder itself?

If you want to include a your own code that’s in a separate js file which will get added to dist/scripts/main.js you can drop your js file into assets/scripts/vendor (you’ll need to create this directory) and then you can change assets/manifest.json to look something like:

{
  "dependencies": {
    "main.js": {
      "vendor": [
        "assets/scripts/vendor/your-script-here.js"
      ],
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    }
  },
  "config": {
    "devUrl": "http://example.dev"
  }
}

Note the addition of vendor under the main.js dependency. You’d then run gulp or gulp --production to compile your assets. Your code will then get compiled into your dist/scripts/main.js file.