Gulp.js: The streaming build system

by tombenner • 12 years ago

83 49 12 years ago

vlunkr3• 12 years ago

I've been using Gulp for a couple of months now, it's great! It's like Grunt, but faster, and the tasks are written in code, not a giant JSON config file.

cwbrandsma• 12 years ago

The grunt config is javascript, not json. So you can write custom tasks code in your grunt config.

For instance, I wrote a custom tag to modify specific pages to inject javascript include statements in HTML pages. There is probably a plugin for that, but I was able to write the code in 15 minutes so I didn't care.

Guillaume86• 12 years ago

I use https://www.npmjs.org/package/gulp-inject to do it with gulp, works fine

vlunkr3• 12 years ago

I know it is, but the majority of the tasks are configured in one big hash.

goodafternoon2• 12 years ago

Same here, have been using it for personal projects for a couple of months and it outperforms grunt by a long shot.

kdlmm• 12 years ago

I agree! Also using it since a few months and couldn't go back to Grunt!

aymericbeaumet5• 12 years ago

Even though they are clearly related, Gulp and Grunt are fulfilling different purposes. You should carefully examined your needs before choosing one over another.

I recently switched to Gulp for several projects, and I'm thinking of switching back to Grunt.

Gulp lacks of some important features. For instance, it does not allow to sequentially execute tasks: everything is done in parallel. This could for sure be emulated by using async, but the overhead is not worth it.

On the other side, Grunt does support sequential and parallel tasks execution, but is more verbose and does a lot of file writing on the disk (though it is relatively moderate).

One concrete example for sequential tasks execution (easily done with Grunt):

- Watch JavaScript files, when a modifications is detected:

  - lint files -> [JSHint, JSCS]

  - if success: launch tests -> [Karma, Mocha]

  - if success: notify

- If any failure occurs: notify and abort the sequence

terinjokes• 12 years ago

We're adding the ability to handle sequential tasks (and other cool combinations) in Gulp 4. See bach[1] for some ideas.

[1] https://github.com/phated/bach

Recoil422• 12 years ago

"For instance, it does not allow to sequentially execute tasks: everything is done in parallel."

This is false. You can set perquisites for a task, which will be executed in sequence.

adamors• 12 years ago

it does not allow to sequentially execute tasks: everything is done in parallel

There's a package[1] for Gulp which does exactly that.

[1] https://www.npmjs.org/package/run-sequence

vlunkr3• 12 years ago

There are ways, like others have said. There is also a callback system you can use to make things sequential, but last time I looked it wasn't well documented

webmaven• 12 years ago

Previously on HN:

* https://news.ycombinator.com/item?id=6822534

* https://news.ycombinator.com/item?id=7080077

bellerocky4• 12 years ago

I recently switched to using gulp and webpack (to build react.js) after having used grunt for many years and I would encourage anyone still using grunt to make the switch. All that pain and suffering to get your grunt build to work will not be a problem. Setting up gulp is painless. It just worked. My setup is less, jshint, wepback with react.js and bootstrap.

I encourage people to use webpack for any kind of js building unless you're using browserfy, but you can use browserfy with straight up gulp. You could also replace browserfy with webpack. Webpack will build your require.js (and your commonjs) without need for almond.js if you're making single builds. Setting up require.js with grunt was a nightmare, and a cinch with gulp + webpack. Like it took me an entire day in the past with grunt, and like 5 minutes with gulp and webpack.

Sean-Der• 12 years ago

I have been using Browserify for about 8 months on all my personal and work projects and have really liked it. Since it seems like you have used both what are your thoughts on Webpack and Browserify?

I have never used Webpack (and now very little about it), but was wondering if it is worth investigating it?

AdrianRossouw2• 12 years ago

webpack uber alles.

start here : https://github.com/petehunt/webpack-howto

bellerocky4• 12 years ago

Webpack is really easy to use and works very nicely with commonjs/nodejs style `module.exports` and `require` which is how I use it now. The place where it becomes incompatible is with the syntax that webpack adds to require statements. Stuff like `require("css!./file.css");` So you could use webpack to build things you once built with browserify, but if you start using `css!` you can't go back easily.

I prefer webpack just because how easy it is to use and how fast it is. It comes with its own watcher too, but I use gulp watch since I use gulp for building less, not the webpack less loader. I haven't wrapped my head around using `require` statements for less just yet.

lumpypua• 12 years ago

+1 on the request for experiences of people who've played with Webpack and Browserify.

Sooo many options, so little time.

lbotos• 12 years ago

I think this is a perfect example of why in 2014 Javascript is harder than ever for someone to learn. I'd love to get your take as someone who seems to be using the latest cool stuff as to how to mitigate that?

I personally learned JS circa 2006 in the jQuery era and now I'm in a position where web-minded individuals ask me how to learn JS but they are "10 steps ahead" asking questions like react vs ember, ember vs angular, etc. Thoughts? Do they basically have to learn up the chain? I guess what I'm saying is there is a lot of history that I'm not sure can be skipped?

bellerocky4• 12 years ago

You can skip. I get that front end stuff can be intimidating. My recommendation is to learn the basics and when it comes to libraries fight the intimidation and take a few minutes to try out new technology when you encounter it. If you find it too hard in those few minutes of actually trying it, don't use it. You can still use script tags if you want. Your site will run just fine. Do what feels comfortable. These tools are supposed to make your life easier, not harder.

Having said that grunt is very bad because it is intimidating even for seasoned front-end programmers, it probably scared a lot of new developers away from even looking at front-end build systems. That's probably a good reason why it should fall off the radar. Thankfully gulp is much easier and I bet if you try it you will find it useful. If you don't, that's OK.

facepalm• 12 years ago

Personally, for the time being I skip all the build tools and just dump JS files in a folder manually. Maybe once I am up to scratch with all the other JS stuff, I'll take a look at the build tools again.

floatboth• 12 years ago

You've been using grunt wrong. It's a task runner, not an asset builder.

I use Grunt to run Broccoli and tests. Broccoli is the best asset tool right now. Trees are so much better than streams or anything else. I even made some Sweet.js macros for making Broccoli files look super neat: https://github.com/myfreeweb/sweetbuild

tieTYT• 12 years ago

I use grunt.js and from my perspective gulp is nice syntactic sugar that solves the same problem. But, it's difficult for me to tell what webpack is for. Granted, I've only skimmed the documentation[1], but I feel like I haven't run into the problems that it's trying to solve. Is this meant for webapps that are hundreds of thousands of lines of code?

[1] http://webpack.github.io/docs/what-is-webpack.html

dugmartin• 12 years ago

I've switched most of my projects to Gulp from Grunt as I prefer code over config. One thing that I wish Gulp did out of the box though would be not to terminate on errors but rather beep without having to write .on('error', ...) handlers.

pmx• 12 years ago

You can add this to your gulpfile.js and it will just spew errors to the console, and then keep going as if nothing happened.

  //Don't let node crash
  process.on('uncaughtException', function (err) {
    console.error(err);
  });

grumblestumble• 12 years ago

This is easily handled with gulp-plumber: http://cameronspear.com/blog/how-to-handle-gulp-watch-errors...

Recoil422• 12 years ago

Adding gulp-plumber will fix this, but I agree, it should be available out of the box.

https://www.npmjs.org/package/gulp-plumber

contrahax• 12 years ago

This is being fixed in gulp 4 - check github issues for more info

securingsincity• 12 years ago

Gulp is fantastic. for me coming from ant as a build process it made much more sense to make that transition of code vs config like grunt

AustinG08• 12 years ago

My friend and co-worker created a gulp primer for wordpress development, take a look: http://www.ataylor.me/code/tutorials/using-gulp-js-in-wordpr... (I love gulp)

goodafternoon2• 12 years ago

Right now, to me gulp is a clear winner if you compare it to grunt.

But let's not forget that grunt had been real forerunner. It's been the only major build tool for years (probably also because streams weren't really as mature when grunt was initially designed). So here's to pioneer Ben Alman, for his immensely valuable contribution to the community!

AdrianRossouw2• 12 years ago

I credit gulp with finally making me 'get' streams, even though I had tangled with them before. It's API is one of the [1] biggest inspirations to code I write nowadays and it also helped me come to grips with the fact that code > config in almost every eventuality.

All of that said, webpack is so very far ahead of everything else in the field that there is almost no way I would use anything else. It also has the side effect of making gulp mostly unnecessary. Simple Makefiles or shell scripts just get me a lot further nowadays.

[1] https://github.com/GraftJS/graft

bronson• 12 years ago

I had the same experience. Gulp is simple and beautiful once you get it. And it's so much faster than Grunt.

Alas, at this point, my build needs are also being handled by Webpack. And, if I'm faced with something weird, I'd first try to solve it with a Webpack plugin. It's nowhere near as pretty as Gulp but it's the simplest to configure and most comprehensive.

It's been a tumultuous few years for JS build systems...

hamburglar• 12 years ago

Was there any particular intro to Gulp that provided this revelation about streams? As far as I know, I 'get' streams, but now you're making me wonder. :)

ankurpatel• 12 years ago

There is also another alternative to gulp build system called Bud https://github.com/azer/bud

Kiro• 12 years ago

Has anything changed? Posting a link to Gulp is like posting a link to Angular or even Ruby on Rails.

alokedesai• 12 years ago

Agreed, there's no reason this should be on the front page of HN.

rblatz• 12 years ago

Even as a .Net dev I'm loving gulp.js, I've got it worked into our builds through MSBuild. and it has made our front end a lot nicer to work with.

TheSisb2• 12 years ago

Grunt isn't worse than Gulp. It may take longer to set up, but it is way more powerful if you do it correctly. Maybe Gulp has evolved, but the last time I used it (~4 months ago) it had its fair share of issues. If you're doing simple tasks (uglify all of this folder to this folder) it works well. When I used it there was no simple way to copy files from one dir to another. Instant no for me there.

jffry• 12 years ago

Something like this? IIRC this would've worked 4 months back:

  gulp.task('copy', function() {
    return gulp.src('src/foo/**/*').pipe(gulp.dest('dest/foo'));
  });

explorigin• 12 years ago

A little OT:

People here are mostly saying to use webpack. Webpack is not a replacement for all of gulp but does work well with it (as do the other JS builders).

I recently did a tour-of-duty looking for the best JS build system. I settled on gulp early (over grunt) because grunt files were just too big to do the same thing. But Gulp is not the best for some aspects of JS building (bundling for multiple-pages). For those, I looked at RequireJS, Browserify and Webpack. Here's my overview opinion:

- RequireJS - a great starter and very powerful. Since it's old and not well-liked in the NodeJS community, people seem to not give it the credit it is due. Documentation could use some updating (some of the nuances of RequireJS take some googling). The one feature that this has that others don't is that you don't need a server to take advantage of it so you can start actually coding now and optimize as your project grows. - Browserify - great for building libraries that you expect to run on NodeJS and in the Browser. But it really falls short on building multiple bundles and dynamically loading resources (it's possible, just annoying). Watchify (auto-building) is nice. - Webpack - The cream of the crop. Multiple pages, dynamic loading, auto-bundling, built-in dev-server to monitor changes. If you have a project that is more than one-page, use webpack.

When using any of these with gulp, I would not use the gulp plugins. Rather use the NodeJS APIs alone. It may be a tad more cumbersome, but the gulp plugins mostly just try to shoe-horn gulp's streaming into a file-based API (and it's limiting).

Gulp.js: The streaming build system

Related Stories