A simple tutorial on the practice of grunt

Before themselves too low, are not used too high on the front-end automation packaging tools, the development of the way is also traditional. Join the new team to catch up with Ah, the front-end technology changes too fast, a variety of technologies, IQ is not enough. Look at the people all use of the technology to coax, oneself still guarding

That little white technology will say no, so some circumstances force you to progress, some environment is to let you unknowingly degenerate. Don't talk nonsense, start learning.

1, the installation of grunt

Grunt depends on the NODEJS environment, so installation needs to install Nodejs, as for how to install a lot of tutorials, there is a button installed installation package, the installation process is relatively easy. Join here has installed the Nodejs,

It's easy to install grunt by entering commands in CMD.

NPM install-g GRUNT-CLI

2. Create a new Grunt project

Create a new filename, the name is random, I take the grunt_test here. Create 2 new files under the file, one is Package.json, the other is gruntfile.js, and generally these two files are required.

Package.json:

{  "Name": "Grunt_test",  "Version": "0.1.0",  "Devdependencies": {    "Grunt": "~0.4.0",    "Grunt-contrib-sass": "*",    "Grunt-contrib-clean": "Latest",    "Grunt-contrib-concat": "Latest",    "Grunt-contrib-requirejs": "Latest",    "Grunt-contrib-htmlmin": "Latest",    "Grunt-contrib-cssmin": "Latest",    "Grunt-contrib-copy": "Latest",    "Grunt-usemin": "Latest",    "Grunt-contrib-uglify": "*",    "Grunt-contrib-watch": "*",    "GRUNT-CSSC": "*",    "Grunt-htmlhint": "*",    "MATCHDEP": "*"  },  "Main": "Main.js",  "Scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1"  },  "Author": "Huzhao",  "License": "ISC"}

Name is your grunt project, not the project name you developed. Devdependencies literally means to rely on, grunt have a lot of plug-ins, many of the implementation of the process relies on plug-ins, devdependencies is the plug-in you need to list out.

3. Download Plugin

Many plugins are listed in Package.json, which need to be downloaded to your grunt project and entered in the command:

NPM--install

The above command will download the required plugins locally, and this time the grunt project will have many more files.

4,gruntfile.js

All the basic implementations are in the file, so it's the most important.

in here};

This is a container, and all content methods must be written inside.

Initialization

grunt.initconfig ({  Pkg:grunt.file.readJSON (' Package.json '),  uglify: {    options: {       ‘/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '    },    build: {      ' src/ <%= pkg.name%>.js ',      ' build/<%= pkg.name%>.min.js '}}  );

PKG load Package.json, read the contents inside.

Uglify is a compression JS plug-in, the source files compressed into the target file.

// loads a plug-in that provides a "uglify" task. grunt.loadnpmtasks (' grunt-contrib-uglify ');

Custom tasks:

Grunt.registertask (' Default ', [' uglify ']);

Defaults are default, that is, you open the Command window in the Grunt Project input: Grunt can be run, here can also be changed to another name, usually corresponding to the development of the project name, such as Grunt_project, then the runtime input: Grunt Grunt_ Project

Simple and complete code:

Module.exports =function(Grunt) {Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), concat: {options: {separator:‘;‘}, Dist: {src: [' Src/**/*.js '], dest:' Dist/<%= pkg.name%>.js '}}, Uglify: {options: {banner :‘/*! <%= pkg.name%> <%= grunt.template.today ("dd-mm-yyyy")%> */\n '}, Dist: {files: {' Dist/<%= pkg.name%>.min.js ': [' <%= concat.dist.dest%> ']        }      }    }  }); Grunt.loadnpmtasks (' Grunt-contrib-uglify ');Grunt.loadnpmtasks (' Grunt-contrib-concat ');Grunt.registertask (' Default ', [' concat ', ' uglify ']);};

A simple tutorial on the practice of grunt