Learning notes for the grunt introductory tutorial

I am now using node.js in several small projects. There are some very powerful tools in the node system. One of my favorite examples is grunt.

Grunt is a tool that allows you to define tasks and then run them by command, running on the command line:

The code is as follows	Copy Code
Grunt Watch

This will start a watch task to monitor the files, I have specified and run the specified tasks, as long as these files are changed, can be monitored. In my case, I've set up a task in grunt to detect JavaScript syntax and compress JavaScript and to compile Sass files into CSS when a. js file is changed. scss file changes.

This article describes how to set up.

Install Grunt
First you need to install the grunt CLI, which is the interface of the grunt command. This will allow you to use the grunt command at the command line:

The code is as follows	Copy Code
$ NPM install-g grunt-cli

Note: Since we use grunt Cli,grunt must be installed on a per-project basis. This allows you to run different versions of the grunt on different projects. If you have previously installed grunt globally, you should uninstall it first:

The code is as follows	Copy Code
$ NPM uninstall-g Grunt

Dependencies required for installation
Next, you need to set up all the dependencies that are required to run grunt. In this example you need to Grunt,grunt-contrib-jshint (detect JS file), grunt-contrib-uglify (compressed JS file), Grunt-contrib-sass (compile your sass). To install these dependencies, you need to set up a Package.json file in the root directory of your project:

The code is as follows

Copy Code

{      "name": "Grunt-example",     "description": "Example project to demonstrate grunt.",     "version": "0.1.0",     "private": true,     "author": {         "name": "Blake Haswell",         "Email": "blake.haswell@simpleweb.com.au"    },     "devdependencies": { & nbsp;       "Grunt": "~0.4.0",         Grunt-contrib-sass ": *",         "Grunt-contrib-jshint": "*",          "grunt-contrib-uglify": "*",         Grunt-contrib-watch ":" * "    } }

Once you have created this file, you can run NPM install commands in your project directory to install the dependencies required:

The code is as follows	Copy Code
$ NPM Install

Set Gruntfile.js
Now you need to create a "gruntfile". In this you can define your task.

First create a gruntfile.js file in your project's root directory. Creating Gruntfile is really simple, we just need to define a COMMONJS module. When we need to change our grunt configuration, we just need to modify this module.

The code is as follows	Copy Code
Module.exports = function (grunt) { Grunt configuration is written here }

Next, set your first task: Jshint. To set up tasks in grunt, you need to run the Grunt.initconfig () method and set up your tasks with each object. For example, here's how to set up Jshint:

The code is as follows

Copy Code

Module.exports = function (grunt) { Grunt.initconfig ({ Jshint (Http://www.jshint.com/docs) Jshint: { All: { SRC: ' javascripts/**/*.js ', Options: { Bitwise:true, Camelcase:true, Curly:true, Eqeqeq:true, Forin:true, Immed:true, Indent:4, Latedef:true, Newcap:true, Noarg:true, Noempty:true, Nonew:true, Quotmark: ' Single ', Regexp:true, Undef:true, Unused:true, Trailing:true, maxlen:120 } } } }); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); };

As you can see, one of your objects contains the Jshint task. Jshint is a multitasking, so that means you can define multiple jshint tasks. In this case jshint has only one task: all. The Jshint all task specifies that the file is linted, and that this option also applies to lint.

Also, did you notice that the task was invoked at the bottom through Grunt.loadnpmtasks (' Grunt-contrib-jshint '). This method can load the Grunt-contrib-jshint task from the node_modules/so that it can use your configuration.

Now you can easily lint your JavaScript files:

$ grunt Jshint
It's cool, isn't it? You can even create watch tasks, monitor JavaScript files, and automatically lints files--When the file fails, it will match you.

The code is as follows

Copy Code

Module.exports = function (grunt) { Grunt.initconfig ({ Jshint (Http://www.jshint.com/docs) Jshint: { All: { SRC: ' javascripts/**/*.js ', Options: { Bitwise:true, Camelcase:true, Curly:true, Eqeqeq:true, Forin:true, Immed:true, Indent:4, Latedef:true, Newcap:true, Noarg:true, Noempty:true, Nonew:true, Quotmark: ' Single ', Regexp:true, Undef:true, Unused:true, Trailing:true, maxlen:120 } } }, Watch Watch: { Jshint: { Files: ' Javascripts/**/*.js ', tasks: ' Jshint ' } } }); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); };

Now you perform grunt watch and start modifying your JavaScript. You will be notified when you save your files and lint fail. Executing coding standards in a cross team development is a great way to save time by capturing awareness errors.

Grunt not only can be used to lint your code, you can quickly set tasks to compress your javascript:

The code is as follows

Copy Code

Module.exports = function (grunt) { Grunt.initconfig ({ Jshint (Http://www.jshint.com/docs) Jshint: { All: { SRC: ' javascripts/**/*.js ', Options: { Bitwise:true, Camelcase:true, Curly:true, Eqeqeq:true, Forin:true, Immed:true, Indent:4, Latedef:true, Newcap:true, Noarg:true, Noempty:true, Nonew:true, Quotmark: ' Single ', Regexp:true, Undef:true, Unused:true, Trailing:true, maxlen:120 } } }, Uglify Uglify: { All: { Files: { ' Public/javascripts/all.min.js ': ' Javascripts/**/*.js ' } } }, Watch Watch: { Jshint: { Files: ' Javascripts/**/*.js ', tasks: ' Jshint ' } } }); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' grunt-contrib-uglify '); };

You can compile your sass:

The code is as follows

Copy Code

Module.exports = function (grunt) { Grunt.initconfig ({ Jshint (Http://www.jshint.com/docs) Jshint: { All: { SRC: ' javascripts/**/*.js ', Options: { Bitwise:true, Camelcase:true, Curly:true, Eqeqeq:true, Forin:true, Immed:true, Indent:4, Latedef:true, Newcap:true, Noarg:true, Noempty:true, Nonew:true, Quotmark: ' Single ', Regexp:true, Undef:true, Unused:true, Trailing:true, maxlen:120 } } }, Uglify Uglify: { All: { Files: { ' Public/javascripts/all.min.js ': ' Javascripts/**/*.js ' } } }, Sass Sass: { Options: { Style: ' Compressed ', Precision:5 }, All: { Files: { ' Public/stylesheets/style.css ': ' Sass/style.scss ' } } }, Watch Watch: { Jshint: { Files: ' Javascripts/**/*.js ', tasks: ' Jshint ' } } }); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-sass '); };

You can then add the task to your watch task, and you will be able to automate these tasks:

The code is as follows

Copy Code

Module.exports = function (grunt) { Grunt.initconfig ({ Jshint (Http://www.jshint.com/docs) Jshint: { All: { SRC: ' javascripts/**/*.js ', Options: { Bitwise:true, Camelcase:true, Curly:true, Eqeqeq:true, Forin:true, Immed:true, Indent:4, Latedef:true, Newcap:true, Noarg:true, Noempty:true, Nonew:true, Quotmark: ' Single ', Regexp:true, Undef:true, Unused:true, Trailing:true, maxlen:120 } } }, Uglify Uglify: { All: { Files: { ' Public/javascripts/all.min.js ': ' Javascripts/**/*.js ' } } }, Sass Sass: { Options: { Style: ' Compressed ', Precision:5 }, All: { Files: { ' Public/stylesheets/style.css ': ' Sass/style.scss ' } } }, Watch Watch: { javascript: { Files: ' Javascripts/**/*.js ', tasks: [' jshint ', ' uglify '] }, Sass: { Files: ' Sass/**/*.scss ', tasks: ' Sass ' } } }); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-sass '); };

Now, every time the sass file is saved, it will be recompiled into CSS, which will automatically lint and compress every time the JavaScript file is saved.

This code is very cool, very happy!