What are the differences between Grunt, Gulp.js an

问题:

What are the differences between Grunt, Gulp.js and Bower? Why & when and how to to use them?

I've seen nowadays, most of the front-end project use above tools, though I am using them like in my recent project I am using gulp to build HTML, CSS and JavaScript using script like

$ gulp build

but don't have much understanding of all these front-end frameworks, plese help me get overall understanding of Grunt, Gulp.js and Bower.

回答1:

In essence and with a lot of hand-waving away of details, Gulp and Grunt are both systems for automating serieses of inter-dependent tasks, commonly used for defining the "build" of your project, like a modern take on the make tool. Typically a project uses one of them or the other, but not both at the same time (for the same parts, anyway).

Bower is different, and frequently used with either Gulp or Grunt: It's a package manager for client-side libraries, making it easy to keep those libs up to date, specify them and their dependencies in a standardized way, and so forth.

The Gulp one-liner from their website:

Automate and enhance your workflow

The Grunt one-liner from theirs:

The JavaScript Task Runner

And Bower:

A package manager for the web

---

Why & when to use them?

I think the above covers that for Gulp and Grunt: If you have tasks you want to automate (like building the release version of a website with minification, concatenation, compression, etc.; or watching files for changes and re-running tasks when they change to support rapid development), you can use Gulp and Grunt for that.

But it's not just builds. You can use Gulp and Grunt for any series of tasks that you need to automate.

Bower is useful for managing the client-side libraries in your projects. You can use Bower to install, say, the latest version of Bootstrap, and it will put the relevant files in standard locations in your project. Bower can update those files if a newer Bootstrap comes out. If a library depends on other libraries (Bootstrap's JS relies on jQuery, for instance), Bower helps manage that tree. There are helpful tasks for Grunt (and I assume for Gulp) that can even automate adding the script and link tags to your HTML for those libraries, by having a placeholder in your source HTML that basically says "put the Bower libs here."

回答2:

gulp and Grunt are task runners. They are different approaches to same problem. Grunt uses configuration based approach, while gulp uses streams from node to achieve result. You use them to define how and which tasks to execute (copying files, adding banners, replacing text, style checking, etc...). They are (usually) run from command line, manually.

For example, if copying and modifying files Grunt will create intermediate files and gulp will leverage node's streams and transform on the fly.

When to use Grunt or gulp is less specific answer because it takes into account personal preference, technology support (plugins for certain tasks), project specifics, and ease of configuration. Both are relatively easy to get up and running, but usually you will end up choosing one which has better plugins for technology stack used for your project (although both have good plugins support).

Bower is package manager. It's used to install javascript (mostly client side) packages (however npm - also packet manager - also contains almost all of those modules/packages. You use it to automatize dependency management and package installing.

回答3:

to continue on the post of T.J. Crowder, Bower is quite similar to NPM, or Composer or Gem. The biggest difference between NPM and Bower, is that bower is for frontend packages, while NPM (used to be) for backend packages. NPM now does frontend packages as well as backend packages.
Also, you need NPM to install Bower.

Grunt was the first of these frontend task automaters that was available. It gave a better experience than what was available at the time. It still has a big following and active community.

Gulp came from grunt, in a way, and improves on it by using streams, not files.

Grunt writes changes to a file, and loads in that file to manipulate some more. Gulp reads a file, and does all transformations on the datastream, and only writes once all manipulations have been done. It means it's async and faster than grunt. And I believe Gulp should be used for new projects in favor of grunt.
There are probably great use cases where grunt preforms better than gulp, but usually gulp is faster.

回答4:

I just completed an analysis of Gulp vs Grunt (our prior standard) and although I think both are important to know for a front end developer to be current and both are good solutions I learn towards Gulp for future projects for the following reasons:

1. Gulp is generally more concise (plugins doing one thing only and streams approach) and readable. One Grunt script that I redid in Gulp resulted in only one quarter the lines of code to produce the same result.

2. Gulp is faster in general.

3. Although Gulp has fewer plugins and thinner documentation key plugins for minification, concatenation, listing, LESS transpilation, and so forth are currently available and work well.