Use parcelify with Gulp

[mbektimirov]

Is there any solution to use parcelify with Gulp?

[dgbeck]

Hi @mbektimirov! Can you elaborate on how you'd like to use the two tools together?

[mbektimirov]

Browsersync, watch, copy are priority tasks, for example.

[dgbeck]

Hi @mbektimirov,

You can call parcelify directly via its API from a gulp file. Just require parcelify and call it with the appropriate options. (Check out how this is done in cartero for an example.)

watch functionality is built into parcelify (and it is very efficient), so I don't think you'll need / want to setup a watch task that re-runs parcelify from gulp. However, you might want to watch the parcelify output and do certain things when those files change.

Does that answer your question? Let me know and we happy to help if anything else comes up.

[betlab]

+1

[ai]

I need it too

[mischkl]

Hello,

I have a question regarding the built-in watch functionality and the ability to "watch" the parcelify output. Of course it's possible to simply gulp-watch the folder that Parcelify produces, but in our case we want to take action whenever Parcelify detects a change, rather than relying on another layer of file watching.

As far as I can tell Parcelify emits a "bundleWritten" event every time a watched bundle is updated. (https://github.com/rotundasoftware/parcelify/blob/master/index.js#L285) ... However, when the package.json is updated, all bundles are rewritten and at the end of this process it seems that no outward-facing event is emitted from Parcelify (see here: https://github.com/rotundasoftware/parcelify/blob/master/lib/parcel.js#L110) ... Might it be possible to add an event for this case as well, so external tooling can also listen for that?

[dgbeck]

HI @mischkl ! Thanks for the request.

Can you expand a little bit on the use case here? What are you trying to accomplish? Why are the individual bundleWritten events not sufficient?

[alessioalex]

@dgbeck @mischkl we're interested in the package.json updates and individual stylesheet updates because we bundle the assets referenced by them (in stylesheets: url properties, in package.json: a special properties with other assets to be bundled).

We would really need these extra events to be triggered.

[mischkl]

I'll try to elaborate. We have a tool that takes the output from Parcelify, moves all reference image assets into a custom folder structure and rewrites the image paths in the CSS. Since we don't want to have to copy everything, but instead just move/modify the existing output files, a simple "gulp watch" is not an option.

Basically it is great that we get "bundleWritten" events every time an asset is updated -- however in the case that a package.json is updated it seems these events never get emitted. Yes the packageJsonUpdated event gets emitted but that happens before the re-bundling is done. What I guess we need at a minimum is for the bundleWritten event to be added to eventsToRelay here:

var eventsToRelay = [ 'assetUpdated', 'packageJsonUpdated', 'bundleWritten" ];

Additionally it might be useful to have an event be emitted after all bundles have been rewritten due to a package.json update, something like packageJsonUpdatedAndBundlesWritten, so all of the changes could be consumed at once. Even though we plan to utilize the more granular "bundleWritten" events in the future, our current tooling re-processes all assets with every update. For our current state of tooling, and for anyone else who wants to keep things simple, it would be more performant/useful to have this information about when Parcelify is "done" updating stuff.

[alessioalex]

There also seems to be a problem with the events emitted by parcelify. I update a style.css and a packageCreated event is triggered instead of assetUpdated:

Edit: my bad, copy-paste failure, forgot to change the event name on logging.

[alessioalex]

So I've played a bit with the 'watch' functionality from parcelify and the assetUpdate event is nice. However when a package.json updates no event is being triggered, but parcelify is console.log-ging (in API 'mode'):

info watch package.json changed "node_modules/copyright/node_modules/hero2/package.json"

Any way we can intercept this @dgbeck ? tnx

Edit: silly me, it works via a packageJsonUpdated event: https://github.com/rotundasoftware/parcelify/blob/master/lib/package.js#L134 appologies for bugging you

[alessioalex]

For future reference, here's how you can listen to everything:

  var p = parcelify(b, options)
    .on('error', cb)
    .on('done', function() {
     //...
    });

  p.on('packageCreated', function(pkg, isMain) {
    debug('packageCreated', pkg, isMain);
  });

  p.on('packageJsonUpdated', function() {
    debug('packageJsonUpdated', arguments);
  });

  p.on('assetUpdated', function(eventType, asset) {
    debug('assetUpdated', eventType, asset);
  });

  p.on('bundleWritten', function() {
    debug('bundleWritten', arguments);
  });

[dgbeck]

Hi @alessioalex and @mischkl !

However, when the package.json is updated, all bundles are rewritten and at the end of this process it seems that no outward-facing event is emitted from Parcelify (see here: https://github.com/rotundasoftware/parcelify/blob/master/lib/parcel.js#L110) ... Might it be possible to add an event for this case as well, so external tooling can also listen for that?

So it looks like there is a bug where bundleWritten events were not getting fired after bundles were written due to package.json updates. In general, the way we were firing these events was overly complicated.. I think it must have been left over from when we were special casing the javascript bundle. Can you try out #34 and see if that branch works for your needs?

Thanks for the feedback and additional info!