Good literature recommended series--------(2) gruntjs--repeated tedious work will always be done by someone (anyway I do not)

Gruntjs is a JavaScript-based command-line build tool that can help developers automate repetitive work. You can think of it as a JavaScript Make or Ant . It can perform tasks such as streamlining, compiling, unit testing, lint checking, and so on. As more and more development moves to the client, the tools to help developers work more efficiently are more useful. In this article, I'll show how I can use Gruntjs to streamline JavaScript files. We will also use Gruntjs's markdown plugin to convert markdown documents to HTML5 documents. Let's get started!

Why should developers care about Gruntjs?

The main reason is that developers often look for ways to automate daily tasks, which helps to minimize the chance of error. It's easy to make mistakes when you're doing repetitive and tedious tasks by hand.

Gruntjs Dependency

Gruntjs requires NodeJS 0.8.0 or later. We will use the NPM Package Manager to install Gruntjs and its plugins. The new version of Nodejs includes the NPM Package Manager by default. The latest version of NodeJS can be downloaded from the official website.

Gruntjs start

Before we begin, we need to understand the three main components of grunt:

1. Gruntjs CLI

GRUNTJS provides the Gruntjs command-line tool. The following is a reference to the command to install the Gruntjs CLI. If you encounter an error message during installation, you may need sudo permissions to run this command.

npm install grunt-cli -g

The above command installs the grunt-cli package globally so that commands can be invoked in any directory grunt . The Gruntjs CLI does not include the grunt task runner. To use Grunt task runner, we need to install it as an application development dependency. gruntand grunt-cli The separation ensures that members of each team use the same version of the grunt task runner.

2. Gruntjs Task Runner

grunkThe grunt task runner is called by the command. We need to install it as an application development dependency. Let's start with a directory and place our blog app sample.

mkdir blogcd blog

As mentioned above, Grunt is dependent on installation as an application development. So we need to create a file that defines the application meta information package.json . Run npm init the command and answer some questions to create the package.json file

$NPM InitName: (blog)Version: (0.0.0)Description:my Awesome BlogentryPoint: (index.js) testCommand:gitRepositoryKeywordsAuthorLicense: (bsd-2-clause) about to write To/users/shekhargulati/blog/package.json:{ "name": "blog", "version": " 0.0.0", "description": "My Awesome blog", "main": "Index.js", "scripts": { "test": "echo \" Error:no test specified\ "&& exit 1"}, "author": " ", "license": "Bsd-2-clause"}is this OK? (Yes) shekhars-macbook-pro:blog shekhargulati$           

Once this is done, the init command creates a file for us package.json . Since we do not need, main scripts author and license These projects, we can delete them. Now we have one of the simplest package.json files.

{  "name": "blog",  "version": "0.0.0", "description": "My awesome blog"}

Run the following command to install grunt locally:

install grunt --save-dev

The above command installs the required dependencies and is also updated package.json .

{  "name": "blog",  "version": "0.0.0", "description": "My awesome blog", "devDependencies": { "grunt": "~0.4.1" }}

3. Grunt Plugins

Gruntjs has a good plug-in system, most of the tasks we need have corresponding plug-ins to deal with. The Gruntjs plugin can be installed with NPM. In this article, we will use two plugins-- grunt-contrib-uglify and grunt-markdown . Complete list of plugins in this.

Gruntfile

Now we should tell Gruntjs what to do. If we run the command in the blog directory grunt , we will see the following error message:

$ gruntA valid Gruntfile could not be found. Please see the getting started guide formore information on how to configure grunt: http://gruntjs.com/getting-startedFatal error: Unable to find Gruntfile.

In order to use grunt, we need to create a Gruntfile.js file named. GruntfileSpecifies the tasks that grunt needs to perform. This file contains the build script.

blogCreate a new file in the directory, named Gruntfile.js , and add the following code:

module.exports = function(grunt){};

This is the template we need to start using Gruntfile.

Then we need to configure the tasks that grunt needs to perform. We call the grunt initConfig function to pass the configuration object to it. Currently, the configuration object is blank.

module.exports = function(grunt){    grunt.initConfig({    })  };

Streamline

The first task we will perform is to streamline the JavaScript files in the app. blogCreate a folder in the directory js , and then create a new file that is named app.js .

$ mkdir js$ cd js$ touch app.js

Open in a text editor app.js and add the following to it. app.jsThe file has two simple methods hello and bye .

function hello(name){    return "Hello, " + name;}function bye(name){ return "Bye, " + name;}

Now we add the task to the Grunt configuration object uglify .

module.exports = function(grunt) {  grunt.initConfig({    uglify: {      build: {        src: [‘js/app.js‘], dest: ‘js/app.min.js‘ } } }); grunt.loadNpmTasks(‘grunt-contrib-uglify‘); grunt.registerTask(‘default‘, [‘uglify‘]);};

The above code does these things:

1. We configured the uglify task to specify the source and destination files.
2. Then we loaded the grunt-contrib-uglify plugin. gruntMake sure that the plug-in is installed before you run the command. All grunt plugins can be installed through the npm installation.
3. Finally, we register this uglify task as our default task. gruntGrunt will invoke the default task when we run the command directly without specifying the task name.

If we run the grunt command, we will encounter the following message:

module "grunt-contrib-uglify" not found. Is it installed?Warning: Task "uglify" not found. Use --force to continue.Aborted due to warnings.

Run the following command to install the grunt-contrib-uglify plugin.

install grunt-contrib-uglify --save-dev

Then run the grunt command again, this time we will see the message of success.

$ gruntRunning "uglify:build" (uglify) taskFile "js/app.min.js" created.Done, without errors.

It succeeded in creating the app.min.js file. app.min.jsas shown below, all the blanks are removed, the function's arguments are refactored into a single letter, and the entire file is compressed into one line.

function hello(a){return"Hello, "+a}function bye(a){return"Bye, "+a}

Good literature recommended series--------(2) gruntjs--repeated tedious work will always be done by someone (anyway I do not)