JS files don't build in development mode

[bgreater]

I may be missing something here but I'm trying to get my JS to bundle on the yarn run blendid command. It builds fine when I run yarn run blendid -- build. I'm assuming this has something to do with the HMR, but b/c I'm using VM and browswersync in proxy mode I'm ok with the JS file reloading. It just does nothing currently.

Below is my task-config.js

module.exports = {
  html        : false,
  images      : true,
  fonts       : true,
  static      : true,
  svgSprite   : true,
  ghPages     : false,
  stylesheets : true,

  javascripts: {
    entry: {
      // files paths are relative to
      // javascripts.dest in path-config.json
      app: ["./app.js"]
    },
    publicPath: './public/javascripts'
  },

  browserSync: {
    proxy: 'outside.dev',
    files: ['./public/**/*'],
    watchOptions: {
      poll: true,
      aggregateTimeout: 300
    }
  },

  watch: {
    gulpWatch: {
      usePolling: true,
      interval: 1000,
      binaryInterval: 2500
    }
  },

  production: {
    rev: false
  }
}

[Corviusx]

I have same problem

[nilsenpaul]

I know by looking at the code that this functionality is by design, but is there a way to alter this behaviour?

[constantm]

Looking at https://github.com/vigetlabs/blendid/blob/gulp-starter/gulpfile.js/tasks/browserSync.js, it seems that it should be injected into the browser somehow, but I have no idea how webpack middleware works.

[constantm]

Okay, I think I figured it out. Webpack doesn't generate an actual file in development. It builds the JS pack in-memory, and it gets served by the proxy (webpack-hot-middleware). Something seems broken though - I found the proxy serves my JS file from http://localhost:8080/javascripts/app.js.

[Blinks44]

Did anyone found a solution ? My drupal new theme with right publicPath: './web/themes/custom/blink/public/javascripts' , doesn't see js files in dev mode... Maybe we could have an option to disable webpack hot reload and just build javascripts folder in dev mode?

[hjblokland]

When using browsersync at localhost:3000 Drupal will see the hot reloaded js file and auto reloads the page when you change something in the src/javascripts folder

[zrakomlatka]

I had the same issue with not being able to see js file in development. What I did is:

1. in task-config.js added browserSync.path
2. in node_modules/blendid/gulpfile.js/tasks/browserSync.js replaced line 40 with publicPath: pathToUrl('/', TASK_CONFIG.browserSync.path, webpackConfig.output.publicPath)

So now it works, but it's not a pretty solution.

[guusvandewal]

I've got this workin' in Drupal 8. You have to point the task-config.js file to the same place you're loading the build javascript file.

  html        : false,
  images      : true,
  fonts       : true,
  static      : true,
  svgSprite   : true,
  ghPages     : false,
  stylesheets : true,

  javascripts: {
    entry: {
      // files paths are relative to
      // javascripts.dest in path-config.json
      app: ["./app.js"],
    },
    provide: {
      $: "jquery",
      jQuery: "jquery"
    },
    publicPath: './profiles/PROFILENAME/themes/custom/THEMENAME/public/javascripts'
  },

  browserSync: {
    proxy: 'web.SITENAME.local',
    files: ['./src/**/*', './templates/**/*']
  },

  production: {
    rev: false
  }
}

You can see the live reloading output of the web pack file somewhere here: http://localhost:3000/profiles/PROFILENAME/themes/custom/THEMENAME/public/javascripts/app.js and your site is visible through http://localhost:3000 if you mapped your proxy right. (And added it to your host file)

Hope this helps someone :)

[olets]

For the general "why am I not seeing processed JS files in my build directory" question, see https://github.com/vigetlabs/blendid/issues/494#issuecomment-343545781 (thanks @HJ-b!)

Without additional information, it sounds like the other problems were likely related to Browersync configuration or paths.

@nilsenpaul there isn't currently a way to override the JS task. Feel free to open a new issue if that's something you think would be useful and we can discuss

@guusvandewal glad you had success! Are you saying that ./profiles/PROFILENAME/ is necessary in the javascripts.publicPath? And was

  provide: {
    $: "jquery",
    jQuery: "jquery"
  },

necessary for Drupal 8? The rest of your configuration is as in https://github.com/vigetlabs/blendid/blob/master/extras/drupal/config/task-config.js. We may need to add or document the jquery requirement.