All posts tagged “Build”

The Battle Of Build Scripts: Gulp Vs Grunt

I’ve already written about how to get started with Gulp as well as how to get started with Grunt. They both automate our tasks, they both use Node, and they both require you to create tasks and install plugins of some sort. But do you wonder about the difference between the two, or even, which is better?

gulp vs grunt

In this article I’ll focus mainly on the differences between these two projects which may factor into helping you decide which of the two you may deem better for yourself. I will be using some code which may be unfamiliar. If it is, I suggest reading through the two previously published articles before you get started.

More on Hongkiat.com

Speed

The main difference between Gulp and Grunt lies in how they deal with their automation tasks on the inside. Gulp uses Node streams while Grunt uses temp files. Let’s put that into plain English, shall we?

Assume you would like to write SASS code for your project. You would want to compile your SASS code and then perhaps minify it.

Grunt handles this using intermediary files which are disk I/O operations. Your SASS file is compiled and then written to a temporary file. The temporary file is used by the autoprefixer and then the final product is written to the destination file.

Gulp takes care of all this in-memory. Your source SASS file is compiled, the result is passed to the autoprefixer without being written to a file and the destination file is then written out.

Compared to in-memory operations, disk writes are slow which means that Gulp has a big speed advantage (for now). A speed comparison was done by tech.tmw which shows that most tasks are at least twice as fast on Gulp. While this wasn’t a hugely scientific study the tendency is there and I’ve seen the same with my own projects. But how big of an impact is the difference in speed?

Difference In Seconds

For most projects this won’t matter. Most projects are small. When you’re creating a WordPress theme or something similar the number of files you need to work with are well within a reasonable limit. It really doesn’t matter if your stylesheets are compiled in 400ms or 800ms.

Furthermore, most projects can be structured in such a way that some of the most intensive issues can be sidestepped. If you have 50 SASS files you can just as quickly concatenate them while in development, there won’t be a need to autoprefix or minify them. You will not need to optimize images each time you save a project, and so on.

Even when you really need the big guns because you’re pushing your work onto a staging server or when you’re updating a repository, does a built time of 5 seconds or 9 seconds make much of a difference?

To top it all off, Grunt will add support for piping in the upcoming 0.5 release which will speed things up considerably, making this a moot point.

The Community

Grunt has been around a lot longer than Gulp so it has a significant user base. Grunt currently receives about 37,000 downloads a day on average, Gulp gets a bit more than half that, near the 23,000 mark. That being said, Gulp has only been around for a year and a half, making that number respectable to say the least.

Grunt currently has over 4000 plugins while Gulp has more than 1200 plugins. According to Google trends more people search for Grunt related things, there are more forums that deal with it and generally more community support.

Of course Gulp is up and coming which means this is likely to even out in the long run. However, this is a barrier for some developers, especially those working Grunt-based projects.

I would like to point out that the communities for both are extremely nice. As far as I can tell the relationship between the leaders in each community is amazing, and should serve as an example to all. The creator of Gulp actually helped the writer of the speed test comparison improve the timing accuracies which lead to a decrease in time differences. That’s what I call a gentleman!

Code Vs Configuration

Apparently this is the tipping point for many, but to be honest, I can’t see the issue here personally.

The argument goes like this: Gulp is a good example that code over configuration can be a good thing when configuration gets a bit confusing. Other people say that while this is true and Gulp is easier to read, it is more difficult to write because piping can be a bit confusing.

Before I weight in, here’s the same example first in Grunt, then in Gulp:

 grunt.initConfig({ sass: { dist: { files: [{ src: 'dev/*.scss', dest: '.tmp/styles', expand: true, ext: '.css' }] } }, autoprefixer: { dist: { files: [{ expand: true, cwd: '.tmp/styles', src: '{,*/}*.css', dest: 'css/styles' }] } }, watch: { styles: { files: ['dev/*.scss'], tasks: ['sass:dist', 'autoprefixer:dist'] } } }); grunt.registerTask('default', ['styles', 'watch']); 
 gulp.task('sass', function () { gulp.src('dev/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest('css/styles')); }); gulp.task('default', function() { gulp.run('sass'); gulp.watch('dev/*.scss', function() { gulp.run('sass'); }); }); 

My opinion is that it really doesn’t matter. Sure, if you’re used to the first way you may need to spend some time figuring out the second, but this is true vice versa as well. So for me, the “it’s confusing” argument is completely invalid. Any new method you learn is confusing at first, but if you take the time to understand the logic of each, it all evens out.

That said, I personally prefer Gulp’s API because it is cleaner, and it reflects the way I think more closely than Grunt. This is of course completely subjective and is not an issue with Grunt at all, it’s just my personal preference.

How To Choose

I don’t think there’s any question about the fact that both Grunt and Gulp are great tools and have helped people save countless hours of time over the years. Grunt is a bit slower for now, but has a much bigger community. Gulp is faster, has a cleaner API, but is lacking the user base.

I think that the decision will ultimately come down to continuity, available plugins and preference.

(1) If you’ve been using Grunt/Gulp for a while now and you’re happy with it, there’s no reason to switch.

(2) If your project requires plugins which are not provided by Gulp and you’re not prepared to write one yourself, you will need to go with Grunt.

(3) If the above two considerations do not apply to you it will come down to preference. I suggest trying out both and seeing which one sticks with you.

As I said, I chose to use Gulp because I like its cleaner API better but I am perfectly comfortable using Grunt if a project calls for it. What you should not do is read that Mr. Know-it-all said that Gulp is better and accept it. While there are differences, there is no clear winner and both projects can, and will, coexist. Try them out and make up your own mind.

Note: you might also want to consider opinions from users like Keith Cirkel (A Javascript consultant) who advises you to use neither. In his interesting Why we should stop using Grunt & Gulp article, he suggests using npm.

Further Reading

There are many other excellent articles about this topic. I would heartily recommend any of the following for further reading; it never hurts to read what others have to say!





hongkiat.com

The RoboChop will let you use an industrial robot arm to build furniture

In March, you’ll be able to control an industrial robot arm directly from a web app. The installation, called RoboChop, will be located at the CeBIT 2015 in Hanover, Germany. Four different robot arms will be given 2,000 bright yellow polystyrene blocks. What happens with those blocks will be up to the citizens of the internet.

From the web app, users will be able to log in and claim one of the 50 x 50 x 50cm blocks for themselves, and then command the arm to slice and dice it into an object for their home. The designs that pop out of the machine, which uses a hot wire cutting tool, will range from abstract sculpture to anything from chairs to nightstands. Once completed, the transformed cubes will be packed up and sent to their…

Continue reading…

The Verge – All Posts

Build a real-time app with Socket.IO

Read more about Build a real-time app with Socket.IO at CreativeBloq.com


Socket.IO is probably the best known of all the real-time web frameworks. In combination with Node.js, it’s responsible for a significant increase in awareness of the benefits of ‘the evented web’, real-time data and real-time interactive user experiences. In this tutorial, I’ll take a look at what’s in the new Socket.IO 1.0, and show how it can be used to build an app for real-time analytics.




Creative Bloq

Apple is reportedly in talks to build its own web TV service

Apple is in talks with TV programmers to put together its own over-the-top pay TV service, Recode says. According to the site’s industry sources, Apple’s proposed service would comprise of bundles of programming, secured through deals with content providers and sold direct to consumers, rather than a full TV lineup. Apple has reportedly already shown demonstrations of the proposed service to people in charge of TV programming, but Recode says the talks “seem to be in early stages,” with the pricing and release date still yet to be set.

The company’s proposed product sounds similar to Sling TV, the $ 20-a-month Dish service that offers a small number of channels such as ESPN for streaming on mobile devices, video game consoles, set-top…

Continue reading…

The Verge – All Posts

How to Build a YouTube Video Website Background

You’re reading How to Build a YouTube Video Website Background, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

YouTube Video Background Website

Big video backgrounds are a recent, and popular, web design trend. Browser-sized videos have brought about a new era of web design in a creative way. If implemented well, video backgrounds add dramatic effect to a site, making it more attractive and engaging to visitors. Aside from the message, one cool thing about video backgrounds […]



Designmodo

Build Any Kind of Website with the New X 3.0 Theme

Themeco4You need sharp tools and a certain amount of empathy to go with that design know-how in order to build the perfect website and keep all of your clients happy. Since every client comes from a different background and has unique demands, it’s up to you to deliver expertly crafted web stores, portfolios, company blogs, or websites to present a …
Inspiration Hut – Everything Art and Design

Build your first Android app with this free course

Read more about Build your first Android app with this free course at CreativeBloq.com


The Android operating system is an inviting platform for people who want to start developing for mobile. It’s flexible and extremely capable of whatever you may want to make – you just need how to make it.




Creative Bloq

Stack Exchange raises $40 million to build out its massive question and answer network

If you don’t know what a “stack overflow” is, then chances are you don’t find yourself trawling the web for answers to obscure computer programming questions. If you did, chances are very high you would end up on Stack Overflow, a question and answer site founded by software expert Joel Spolsky. What began in 2008 as a relatively niche property has grown into one of the 50 biggest websites in the world, covering topics from coding to cooking to golf and averaging 85 million monthly visitors across of network of six sites called Stack Exchange.

Continue reading…

The Verge – All Posts

Build faster WordPress sites with lazy loading

Read more about Build faster WordPress sites with lazy loading at CreativeBloq.com


The continued growth of the web has led developers and content producers to cram as much into web pages as they can. High-resolution video, interactive advertisements, high-density graphics, rich visitor analytics – these can all be found on a regular web page. As consumer bandwidth and desktop capabilities increase, so does the footprint of any particular website.




Creative Bloq