Gulp compilation not including some js assets


#1

Hi guys,

I have a theme that I was working on a little while ago that is using Sage (but not the full Trellis/bedrock stack).

Was just finishing off some JS tweaks and running Gulp, but for some reason it seems like some of the js files weren’t being included in the dist folder.

Any thoughts on what might cause that to happen? I found I could copy them over to the dist folder from assets and then the page worked (have a hosted staging site) but am just wondering what’s wrong with my local build…

Note: I copied the project over from another folder on my computer when I started working on this last week. So maybe that has something to do with this.


#2

Could you post your bower.json and assets/manifest.json? The Sage gulp config should be building JS dependencies into your main.js unless you’ve configuring things differently.

It might also be possible that when you copied the folder over you missed some files, and didn’t run npm install and bower install after copying, so they’re still lost?


#3

Yes.

Here’s the bower.json:

    {
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.4"
  }
}

and main.json:

{
  "dependencies": {
"main.js": {
  "files": [
    "scripts/main.js"
  ],
  "main": true
},
"main.css": {
  "files": [
    "styles/main.scss"
  ],
  "main": true
},
"customizer.js": {
  "files": [
    "scripts/customizer.js"
  ]
},
"jquery.js": {
  "bower": ["jquery"]
}
  },
  "config": {
"devUrl": "http://example.dev"
  }
}

Looking at manifest, I can see my homepage.js file is not included, but obviously should be.


#4

Yeah, based on this, the only files gulp would be creating are main.js, customizer.js, and jquery.js. If you need other files, you could either import them into main.js, or create new entries for them in manifest.json, i.e.:

"main.js": {
  "files": [
    "scripts/main.js",
    "scripts/homepage.js"
  ],
  "main": true
}

or

"homepage.js": {
   "files": [
      "scripts/homepage.js"
   ]
}

#5

Thanks a lot Ben! That makes sense.

Have included the file and that works properly now. :slight_smile: