Grunt vs Gulp vs NPM build scripts

[JarLowrey]

I have no idea.

[FlorianWendelborn]

IMHO NPM is the easiest solution, especially if you already have some bash knowledge.

[HiFaraz]

I'm leaning towards npm. For the playbook: the less to learn the better. I'm looking for the 80% solution.

Can we list out some handy npm scripts? I'll start:

• add major, minor, or patch version and publish to npm
• run in debug mode vs production mode

[FlorianWendelborn]

It's a little bit more advanced, but I insert this command into all package.jsons I touch. It basically marks the current npm version as a git tag and push it to github.

[JarLowrey]

If you're going for 80%, then I think an argument can be made for Grunt/Gulp. They are pretty huge communities with lots of documentation, tons of projects/devs use them. Personally I feel bash is a really confusing, difficult language. I think for that reason maybe 80% of people would prefer using JS over a bash-like language.

That said, there are advantages to NPM

[HiFaraz]

What gets a user started faster? That is the key question.

Also consider what problem is being solved. Maybe we should recommend npm scripts for a few basic things and gulp for the rest?

[JarLowrey]

Good question. I like that potential solution. If you only want to Browserify or something, then including all of Gulp/Grunt + its plugins, and setting up build files wouldn't be the easiest way. I guess the recommendation is NPM for basic tasks and Grunt/Gulp for more advanced stuff, if you so desire.

[HiFaraz]

Exactly, the playbook has to be problem-solution focused not tech focused.

What are some problems solved by gulp/grunt that should not be solved with an npm accept, and why?

[partounian]

Gulp gets a user started faster. I don't even know NodeJS at all but can easily use Gulp.

[HiFaraz]

@partounian Which specific problems would you recommend it for? Please help me link it to a problem-solution focus.

[partounian]

Things like minifying html, css, js. Check out unCSS, for example if you are using any css library it will cut out the fat and let you use only what you are using. Concatenation if you're a fan of that. Eslint (linting) , and automatic browser reloading to name a few big ones.

On Mon, Aug 29, 2016, 9:54 AM Faraz notifications@github.com wrote:

@partounian https://github.com/partounian Which specific problems would you recommend it for? Please help me link it to a problem-solution focus.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HiFaraz/node-playbook/issues/7#issuecomment-243183313, or mute the thread https://github.com/notifications/unsubscribe-auth/ACbIG0i1sug8rC41A7Oxw2imaBEsxY7tks5qkw60gaJpZM4JvjPl .

Thank you, Patrick Artounian

[JarLowrey]

Browserify to compile all your JS files into one. Babel to ensure your ES6 code is compatible with current browsers. Uglify to minimize files.

[partounian]

Oh yes Babel! The all mighty lord and savior, with HTTP2, I don't see browserify as too important anymore though.

On Mon, Aug 29, 2016, 10:02 AM James notifications@github.com wrote:

Browserify to compile all your JS files into one. Babel to ensure your ES6 code is compatible with current browsers.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HiFaraz/node-playbook/issues/7#issuecomment-243185573, or mute the thread https://github.com/notifications/unsubscribe-auth/ACbIG8nNTy9OE7_s08nnFYPuJpoTJmzTks5qkxCWgaJpZM4JvjPl .

Thank you, Patrick Artounian

[JarLowrey]

Because of simultaneous requests? Is that really better than 1 browserified file?

[partounian]

Yes

On Mon, Aug 29, 2016, 10:06 AM James notifications@github.com wrote:

Because of simultaneous https://http2.github.io/faq/#why-revise-http requests? Is that really better than 1 browserified file?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HiFaraz/node-playbook/issues/7#issuecomment-243186652, or mute the thread https://github.com/notifications/unsubscribe-auth/ACbIG7-mGmENDG5IZe8IbkGp65z-__Knks5qkxF-gaJpZM4JvjPl .

Thank you, Patrick Artounian

[JarLowrey]

To be fair, even if that's true HTTP2 adaption rates are expected to be slow. I would still recommend Browserify for most projects.

[partounian]

? If you look over caniuse.com you can see that most users (90%+) can accept HTTP2 connections.

On Mon, Aug 29, 2016, 12:14 PM James notifications@github.com wrote:

To be fair, even if that's true HTTP2 adaption rates are expected to be slow. I would still recommend Browserify for most projects.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HiFaraz/node-playbook/issues/7#issuecomment-243225192, or mute the thread https://github.com/notifications/unsubscribe-auth/ACbIG2laXuo6aMSMxGbWo8NK2PETuZLpks5qky-vgaJpZM4JvjPl .

Thank you, Patrick Artounian

[JarLowrey]

Wow cool. It's 70% support and 5% partial tho.

[HiFaraz]

I think we are in the zone of unproductive discussion.

Here are the problems that I've gathered so far:

• you need to build your front end if you're using ES2015
• you would like to package it nicely (minify etc) to better distribute it

Am I correct here? If so, we need to identify a reasonable and unquestioned solution that fits the purpose of this playbook, and then move on to the next problem.

[JarLowrey]

Haha true, sorry. Yes that's correct. If browserify is going out of style than it's fine not to include it. Babel, uglify, uncss, livereload, eslint should be pretty basic ones though.

[partounian]

Well yes for the second part. For the first part, you need a polyfill (Babel) if you want to use ES6 consistently on different browsers. If front end js/ES6 is out of scope then you can ignore it.

On Mon, Aug 29, 2016, 1:44 PM Faraz notifications@github.com wrote:

I think we are in the zone of unproductive discussion.

Here are the problems that I've gathered so far:

• you need to build your front end if you're using ES2015
• you would like to package it nicely (minify etc) to better distribute it

Am I correct here? If so, we need to identify a reasonable and unquestioned solution that fits the purpose of this playbook, and then move on to the next problem.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HiFaraz/node-playbook/issues/7#issuecomment-243249771, or mute the thread https://github.com/notifications/unsubscribe-auth/ACbIG4LeyLPyYf0Cj3ec01INo9DdwOndks5qk0SOgaJpZM4JvjPl .

Thank you, Patrick Artounian

[HiFaraz]

Re: livereload - that's a third problem entirely, and good one to catch.

For all of the tools that have been mentioned, are npm scripts sufficient? Or do any exclusively require gulp/grunt?

[JarLowrey]

I believe they are all NPM packages, and thus NPM scripts will work fine. Scripts are just harder to write and use cause they're bash like.

"bundle": "npm run bundle-main --silent && npm run bundle-authenticate --silent",

vs

 grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),

      //allow import/export of JS classes
      browserify: {
         dist: {
             options: {
//...

[partounian]

Hit the nail on the head. In a bit I will paste in my very short gulp script to show an example.

[HiFaraz]

Ok. How is the user experience if we ask a beginner to use browserify, minify et al through gulp? I imagine it's easy per individual tool, but how about all together? Do they need to interact?

[HiFaraz]

Btw thank you both for your help on this! The node ecosystem needs a clear "get started" playbook like this (much like there is for individual packages), and this is helping a lot! Cheers

[partounian]

No problem Faraz. These are the best tutorials and the type of thing I would love to read myself so I help where I can. Check this out, https://markgoodyear.com/2014/01/getting-started-with-gulp/

[MatthijsKamstra]

TL;DR so if this comment is already posted before ... sorry

I have written about gitbook about Haxe (not relevant for the discussion but awesome) and Node.js. First I used grunt but later someone wrote an example how to use NPM: more info

[antony]

npm is definitely the tool of choice, but consider webpack if you want all the es6, minified, bundling goodness without the complexity.

[HiFaraz]

@JTronLabs Also consider that we don't have to use bash with npm scripts. We can just call other .js files.

[JarLowrey]

Sounds good to me

[antony]

Also I meant to mention, if you find yourself doing a lot of bash gymnastics with npm, consider scripty:

https://github.com/testdouble/scripty

Makes long npm commands much easier to handle, as well as extending npm with numerous other features.

[HiFaraz]

30 added some good scripts, thanks @antony

[HiFaraz]

Closing due to lack of recent interest. Thanks all for your help! I will be sure to incorporate your ideas into an upcoming update.