Grunt-Installation Guide

Found some people around the front bias.
They think the front end is just a less complicated technique to tune the interface, a little polished, and finally make a "vase" with little practical value.
In fact, the front-end technology stack is not simple, for example, we can use Grunt to do some automated operation.
Here is a simple record of the installation of grunt, we hope to help.

node. js

Many of the builds we use are built on node. js, so we'll install node. JS first.
Installing node. JS is almost impossible, and you can go directly to node. JS's official website, or use it to brew apt-get install it yum .

After the installation is complete, execute the command to check that the output is correct:

$ node --versionv0.12.7

npmwill be installed with node. JS and we need to do npm install things like that often.
So if it hasn't been lifted before npm , you may need to getting Started once.

Grunt

Enter Grunt's official website to see a wild boar, grunt defines itself as a Javascript task Runner, and what we do through grunt is a task.

Install first, pay attention to the grunt-cli .

npm install -g grunt-cli

See if the installation was successful

Ezra:~ Kavlez$ grunt --versiongrunt-cli v0.1.13

How do you use it? The simple steps are listed here.

• Create a directory and try it in this directory

  mkdir my-gruntcd my-grunt

• Execute npm init to create the Package.json, there will be some options to fill in the prompts, followed npm install by the installation of the required components, such as:

  npm install grunt-contrib-uglify --save-dev

• Perform the vim package.json view, you will find Grunt-contrib-uglify chant added to the configuration file

   "devDependencies": {  "grunt": "^0.4.5",  "grunt-contrib-uglify": "^0.9.2"}

• Package.json is not used to configure tasks, we want to configure tasks in Gruntfile.js , such as:

  module.exports = function(grunt) {    grunt.initConfig({        pkg: grunt.file.readJSON(‘package.json‘),        uglify: {            build: {                src: ‘omg.js‘,                dest: ‘omg.min.js‘            }        }    });    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);    grunt.registerTask(‘default‘, [‘uglify‘]);};

• Grunt-contrib-uglify can be used to compress the source file, we create a omg.js and write the following to try the uglify:

  ‘use strict‘;function omg(){    alert(‘omg!!!!!!‘);}

• Perform the task! If it goes well, we can see the omg.min.js in the catalogue.

  grunt uglify

With a boar alone, we still can't avoid some repetitive operations.
So we need other small partners, like a bird.

Bower

Bower is the bird, I mean the logo.
Bower on the official website to do the following description:

Web sites is made of lots of things-frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

That is to manage a variety of dependencies for us, such as frameworks, libraries, tools, etc.

Installation method is still simple, directnpm

$ npm install -g bower

After the installation is complete, check to see if the version check was successful

$ bower -v1.5.1

The use of the method is very simple, here is a simple example, for example, we want to introduce a backbone in the project:

$ bower install backbone

How does Bower find backbone by name? We can take a look at http://bower.io/search/.
Backbone is registered with the name "backbone" in bower.

In addition, we have several ways to introduce dependencies:

# GitHub shorthand$ bower install desandro/masonry# Git endpoint$ bower install git://github.com/user/package.git# URL$ bower install http://example.com/script.js

You might have a question thatnpm and Bower can do dependency management, what's the difference?

Here, I quote the following StackOverflow's answer:

NPM is very commonly used for managing node. JS modules, but it works for the front-end too when combined with browserify a nd/or $ npm Dedupe.

Bower are created solely for the front-end and are optimized with the. The biggest difference is this NPM does nested dependency tree (Size heavy) while Bower requires a flat dependency tree (p UTS the burden of dependency resolution on the user).

A nested dependency tree means that your dependencies can has its own dependencies which can has their own, and so on. This was really great on the server where you had to care much about space and latency. It lets you are not having to care about dependency conflicts as all your dependencies use e.g. their own version of underscore. This is obviously doesn ' t work, which well is on the front-end. Imagine a site has to download three copies of JQuery.

The reason many projects use both are that they use Bower for front-end packages and NPM for developer tools like Yeoman, G Runt, Gulp, Jshint, Coffeescript, etc.

All package managers has many downsides. You just has to pick which your can live with.

I believe this answer will be more experienced in the use npm and bower process:D
The answer mentions the Yeoman, what is it for?

Yeoman

Yeoman integrates best practices and common tools.
When you create a project, we can use it to build the project file, the code structure.

Directly using the direct npm installation, note that the name here is yo, not Yoeman.

$ npm install -g yo

may not go well.

See some friends recommend to use sudo the installation, in fact, this will bring some permissions problems, such as some modules will not load, or every time you execute some commands need to add sudo .
We can refer to https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md to solve this problem.

In this simple reference to the content of this post, the process is as follows:

$ mkdir "${HOME}/.npm-packages"

Add the following code to the . BASHRC(or possibly . Bash_profile):

NPM_PACKAGES="${HOME}/.npm-packages"NODE_PATH="$NPM_PACKAGES/lib/node_modules:$NODE_PATH"PATH="$NPM_PACKAGES/bin:$PATH"# 根据自己的情况设置manpathunset MANPATHMANPATH="$NPM_PACKAGES/share/man:$(manpath)"

Add the following code to the . NPMRC :

prefix=~/.npm-packages

Finally, don't forget source :

$ source ~/.bashrc

If you are using brew to install node, other problems may occur, such as:
http://yeoman.io/learning/faq.html#yo-command-not-foundhttps://github.com/yeoman/yeoman/issues/466#issuecomment-8602733

If a prompt appears:

sh: yodoctor: command not found

You can perform the following commands to resolve:

$ npm config set unsafe-perm true

Yeoman has a thing called generator, we can let yeoman according to the specific generator to generate the corresponding project. The generator that are currently available are listed in http://yeoman.io/generators/.

Here is an example of the first in the list-the generator ofAngularJS , which simply records the steps used.

• Install generator first, the generator name of Angularjs in the list is called angular, and the name preceded by a generator_ is the name registered in NPM.

  npm install -g generator-angular

• Create a directory for your project and enter it.

  mkdir yo-my-angular

• Execute yo and start the build.

  yo angular yo-my-angular

• Yeoman will prompt the following questions, choose according to the need, the rest is a moment.

  ? Would you like to use Sass (with Compass)? Yes? Would you like to include Bootstrap? Yes? Would you like to use the Sass version of Bootstrap? Yes? Which modules would you like to include? (Press <space> to select)

• If performed properly, Yeoman will eventually prompt done , without errors.

Of course, we can ignore Yeoman, and use grunt directly, and write the configuration of the related task a little bit.
We may just need some simple features, but the best practices provided by Yeoman will give us more inspiration, and who will get through the better ways?

Grunt-Installation Guide