Grunt Study Notes (for beginners) and grunt Study Notes

Grunt Study Notes (for beginners) and grunt Study Notes

1. Before learning grunt, you must first have a simple understanding of nodejs. The steps for installing nodejs are simple. Install nodejs as prompted on the official website. Http://www.nodejs.org/

2. Grunt Introduction

Grunt is an automated project building tool. if you need to repeatedly execute tasks such as compression, compilation, unit testing, code check, and packaging and publishing. you can use Grunt to handle these tasks. All you need to do is configure Grunt, which can greatly simplify your work.

If you use Grunt in a team, you only need to agree with other personnel about the problems that should be avoided when using Grunt, so that you can easily and automatically handle most common work tasks, your effort is almost zero.

3. Install Grunt

Both Grunt and Grunt plug-ins are installed and managed through npm and Node. js Package Manager.

D:\>cd nodeTest1\nodejs-grunt\D:\>cd nodeTest1\nodejs-grunt\npm install -g grunt-cli

This is global installation.

D:\>cd nodeTest1\nodejs-grunt\grunt

The following error will occur:

grunt-cli: The grunt command line interface. (v0.1.9)Fatal error: Unable to find local grunt.If you're seeing this message, either a Gruntfile wasn't found or grunthasn't been installed locally to your project. For more information aboutinstalling and configuring grunt, please see the Getting Started guide:http://gruntjs.com/getting-started

Execute the grunt command and we find that the system reports an error, prompting that the local database cannot be loaded. Because grunt command execution requires the current directory to contain package. json and Gruntfile. js files.

Package. json, which is the npm project configuration file
Gruntfile. js is a configuration file specially used to configure grunt.

For verification, this article provides an example:

~ D:\>express -e nodejs-grunt~ D:\>cd nodejs-grunt && npm install ~ D:\nodejs-grunt>npm install grunt --save-dev

In Package. jsonEnter the following amount in the file:

{  "name": "nodejs-grunt",  "version": "0.0.1",  "private": true,  "scripts": {    "start": "node app.js"  },  "dependencies": {    "express": "3.2.2",    "ejs": "*"  },  "devDependencies": {    "grunt": "~0.4.1",  }}

AndGruntfile. jsEnter the following amount in the file (New is required ):

module.exports = function(grunt) {  // Project configuration.  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    uglify: {      options: {        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'      },      build: {        src: 'src/<%= pkg.name %>.js',        dest: 'build/<%= pkg.name %>.min.js'      }    }  });  // Load the plugin that provides the "uglify" task.  grunt.loadNpmTasks('grunt-contrib-uglify');  // Default task(s).  grunt.registerTask('default', ['uglify']);};

Edit package. json again and add the dependency library grunt-contrib-uglify to devDependencies.

{  "name": "nodejs-grunt",  "version": "0.0.1",  "private": true,  "scripts": {    "start": "node app.js"  },  "dependencies": {    "express": "3.2.2",    "ejs": "*"  },  "devDependencies": {    "grunt": "~0.4.1",    "grunt-contrib-uglify": "~0.1.1"  }}

Then Nodejs-grunt directoryCreate Src and build, and nodejs-grunt.js, Where the nodejs-grunt.js

Var sayHello = function (name) {return "hello" + name ;}

To ensure that the dependent database is loaded, you must Run npm install againCommand

Run the following command:

D:\nodejs-grunt>grunt

Enter the following information in the console:

Running "uglify:build" (uglify) taskFile "build/nodejs-grunt.min.js" created.Uncompressed size: 59 bytes.Compressed size: 40 bytes gzipped (43 bytes minified).Done, without errors.

Open nodejs-grunt \ build \ nodejs-grunt.min.js

/*! nodejs-grunt 2014-09-08 */var sayHello=function(l){return"hello "+l};

This is a compressed instance.

Common Grunt plug-ins

• Grunt-contrib-uglify: compressing js Code
• Grunt-contrib-concat: Merge js files
• Grunt-contrib-qunit: unit test
• Grunt-contrib-jshint: js Code check
• Grunt-contrib-watch: monitor File Modification and re-Execute Registration Task

The preceding section describes a compression instance. The following plug-ins will not be described one by one.

Below, we will put the demo in the resource for free download.

Http://download.csdn.net/detail/zz410675629/7881187

Reference: http://blog.fens.me/nodejs-grunt-intro/

We recommend that you use a Korean learning book that is simple for beginners.

Happy Korean ---- for life-oriented oral English.
Standard Korean-Grammar

Download Japanese learning software for beginners

If you use a Japanese software, you only need to memorize the word and back the syntax. You can also use the software that provides the ability to question questions.