Grunt + bower-Front-end construction tool (turn)

At present, the trend of the more popular web development is the separation of front and back. The front-end uses a heavy-weight JavaScript framework, such as Angular,ember, and the backend uses the RESTful API's Web service service to interact with the data in JSON format.

For back-end service languages, whether Maven or Gradle in Ruby's Rack,java, or SBT in Scala, they are able to provide functions such as compile run, run test, package deployment, dependency management, and so on. Coupled with a powerful plug-in system, it is possible to plug and use many powerful features like data Migration Tool (Liquibase), test coverage plug-in, and some code-style checking tools.

But for the previous JavaScript and CSS, there are few tools that can be used to set the functionality described earlier. So how can we achieve what we said earlier? --grunt + Bower

Grunt claims to be a building tool for the JavaScript world, providing powerful automation capabilities. For tasks that require repetitive repetition, such as compression (Minification), compilation, unit testing, linting, and so on, automation tools can alleviate our labor. Grunt also has a powerful plug-in system, and most of the tasks you need have been developed as grunt plugins, and more plugins are being created every day.

But it's not perfect.

We know that in JavaScript development, we often need to introduce a lot of open source tools. Inevitably, there are compatibility issues between versions, such as the jquery that Bootstrap relies on is not 1.10, but 2.03. If you are doing a JS version upgrade, then I think you will go to the various websites to download their latest package, and then carefully replace its version. However, these features are no longer a problem in the Gradle and other backend version management tools. The emergence of Bower, the perfect solution to this problem.

In the JavaScript world, many things are provided by the community, so each tool is quite independent. For example, tools have their own separate configuration files, their own command-line parameters, and sometimes need to have some additional plug-ins to combine two of tools. So there will be a lot of commands that we need to understand. But fortunately, after we understand, the next time you can use the already configured files, through a few commands will be able to get everything ready, very convenient.

First step: Install Nodejs

In Mac, we can use brew to install. Under other systems, please use the appropriate tool or download it directly to the website.

Brew Install node

Nodejs allows us to use JavaScript programming on the server side, which is the basis for many JS tools. Please make sure it is up to date:

Brew Upgrade Node

NPM is an official package dependency management tool provided by node. We use the following grunt,bower, etc., are installed in the form of plug-in download and installation. When we install the Nodejs, NPM is automatically available. View version:

Npm-v

Next, create a new directory Grunt_bower, and then run NPM Init, which, according to the prompts, will eventually produce a package.json as follows:

{  "name": "Grunt_bower",  "version": "1.0.0",  "description": "This was for grunt and Bower",  "main": " Index.js ",  " repository ": {    " type ":" Git ",    " url ":" Https://github.com/yeahyangliu/grunt_bower.git "  }}

Step Two: Install Grunt

You need to install the grunt command line (CLI) into the global environment first. You may need to use sudo when installing:

NPM install-g GRUNT-CLI

Once the above command is executed, the grunt command is added to your system path and can be executed in any directory at a later time.

Note that installation grunt-cli is not equal to installing the grunt! The task of the Grunt CLI is simple: Calls Gruntfile are Grunt in the same directory. The benefit is that it allows you to install multiple versions of Grunt on the same system at the same time.

In the grunt project, it is generally necessary to add two documents to your project: package.json and Gruntfile . Which package.json in the inside already contains some grunt commonly used plug-ins, such as Grunt-contrib-jshint, we can cut some of the use if necessary. So now our file should look like this:

{  "name": "Grunt_bower",  "version": "1.0.0",  "description": "This was for grunt and Bower",  "main": " Index.js ",  " engines ": {    " node ":" >= 0.10.0 "  },  " Devdependencies ": {    " grunt ":" ~0.4.5 ",    " Grunt-contrib-jshint ":" ~0.10.0 ",    " Grunt-contrib-watch ":" ~0.6.1 ",    " Grunt-contrib-qunit ":" ~0.5.2 ",    "Grunt-contrib-concat": "~0.4.0",    "grunt-contrib-uglify": "~0.5.0"  }  "Repository": {    " Type ":" Git ",    " url ":" Https://github.com/yeahyangliu/grunt_bower.git "  },  " author ":" Yang Liu "  }

Below, we need a gruntfile,gruntfile that defines plug-ins, and we can customize some tasks to manage our JavaScript code. Generate a gruntfile by executing the following command:

NPM Install Grunt-init-ggit clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/ Gruntfilegrunt-init Gruntfile

The next step is to put all the plugins in Package.json through NPM in this directory, and we can use grunt to help us run and manage our JavaScript code.

Step Three: Install Bower

Bower is similar to NPM in the sense that it is used to manage the dependencies of commonly used JS libraries, such as jquery, underscore, ANGULARJS, etc. Again we can install it via NPM:

NPM Install Bower-g

Similarly, Bower also has its own configuration file Bower.json

{  name: ' Grunt_bower ',  version: ' 0.0.0 ',  authors: [    ' YANG Liu <[email protected]> '  ],  License: ' MIT ',  ignore: [    ' **/.* ',    ' node_modules ',    ' bower_components ',    ' test ',    ' tests '  ]}

This is the moment when we witness miracles:

Bower Install Angularjs--save
Bower Insall jquery--save

We can see that angular and jquery have been downloaded locally. There are two more dependencies in Bower.json:

"Dependencies": {      "Angularjs": "~1.2.20",  "jquery": "~2.1.1"}        

Moreover, in our catalogue, two versions of the JS file are also downloaded to the local. If you think you're done now, then you're wrong, Bower is only responsible for downloading dependencies to the local bower_components directory, and is not responsible for copying them into the actual use of our project, such as the Public/js/lib directory.

To achieve this, we also need the help of another plugin:

NPM Install Grunt-bower-task--save-dev

Then open its documentation and follow the prompts above to configure it. First, add the appropriate location in the Gruntfile:

Grunt.loadnpmtasks (' Grunt-bower-task ');

Then, in the Grunt.initconfig ({...}) parameter, add the corresponding configuration item and copy the Bower downloaded JS Library to Public/js/lib:

{"  bower": {"Install": {"      options": {                "TargetDir": "./public/js/lib",                "layout": "Bycomponent",                "Install": true,                "verbose": false,                "Cleantargetdir": false              }      }}

In the end we just need to run a simple line of commands, and we can say grunt and bower perfectly together:

Grunt Bower

At last

With these two big tools, we have achieved from the management of dependency, compile deployment, compression packaging, run the test all the features, and very clear configuration, so that the project people have the same configuration, this way, greatly simplifying the group management efficiency and maintenance costs, very worthy of praise!

Thank you again for reading this.

Grunt + bower-Front-end construction tool (turn)