Introduce a build process using gulp.js

[ben-eb]

Hi Lea, thanks for the plugin! I found it very useful so I decided to write a build process for you, replacing the CodeKit workflow that you use at the moment. This will make it easier for collaborators to rebuild minified files as they work on the development javascript.

The build process uses gulp.js, the streaming build system. It requires that you have Node (and npm) installed so that you can run it and install the dependencies. To get up and running, once you have Node installed you'll need to run this command in the project root:

npm install && npm install -g gulp

This will fetch all of the dependencies and install gulp globally to make it easier to run the tasks. Then, to start gulp watching the files for changes, do:

gulp watch

This will compile prism.js and any minified files forever until you stop the watcher with CTRL + C. You can also run compile tasks for each folder without watching, using gulp build, gulp components and gulp plugins.

Note: The minifier seems slightly different to the one that CodeKit is using, some optimisations are different, hence why all of the minified versions have been changed.

I hope this helps! If you have any questions I'll be happy to answer them. :-)

[LeaVerou]

Hi Ben!
Thanks so much for working on this! I really like the idea of a proper build process that's transparent to contributors. However, wouldn't this require everybody contributing to use node every time they're working on Prism? Not sure this is optimal, since not every Prism contributor is familiar with Node.

(not saying no, just that I need to think about it more carefully)

[apfelbox]

@LeaVerou you could say the same thing about Codekit right now.

And besides: you don't need to know node, you just need to do npm install && gulp xyz.

[ben-eb]

@LeaVerou As @apfelbox says you don't need a working knowledge of Node to use this, you just need Node installed, then you can pull down the dependencies using npm install. Installing node is very straightforward, and the watch task is set up so that you can just work on the relevant part of the codebase with the minified files generated automatically.

I think so long as the workflow for contributing to Prism is properly documented, it won't be a problem for people who want to contribute to the project, even if they have zero Node experience. I'd hope that having something like this would encourage people to learn more about it. :-)

[LeaVerou]

At least with CodeKit though, you set it up once and then it watches the files forever. With gulp, you need to run node and call gulp watch every time you work on Prism, non?
Although, on the other hand, you still have to launch CodeKit if it's not already open, so that's a step as well…

[ben-eb]

That's correct, yes. Well it's your decision Lea so I'll leave it with you, but if you have any further questions then let me know. :-)

[apfelbox]

@LeaVerou what do you think? I would say we include it - at least for the people who want to minify.
So a random PR can still just include the raw & unminified components/ file but we have a common way to auto-generate the minified files.

[LeaVerou]

Sure, let’s merge it. As long as somebody also updates the README.md to explain what to do for contributors, step by step.

Btw, thank you so much for your help @apfelbox!

[apfelbox]

Would make sense to update these dependencies now before merging.

[apfelbox]

@ben-eb do you want to rebase your PR on master? Otherwise I would send a PR probably later this week.

[ben-eb]

@apfelbox See above. I just merged gh-pages and ran the build again, seemed like there was only conflicts in 'built' files.

[apfelbox]

@ben-eb nice, thanks! I will merge it in the morning, when I have time to look at it in detail (and go for a test run 😉).

Looks very good though, thanks for your work!

[ben-eb]

You're very welcome. 😄

[LeaVerou]

Thank you both for your work!
Could somebody please update the readme?

[apfelbox]

Will do. I also wanted to add a paragraph to the website on how to contribute.

[LeaVerou]

Thanks! And thank you again @apfelbox so much for all your hard work recently. You rock!