Implementation notes of grunt frontend automated Development Process

GruntIs based on node. the project scaffolding in the JS environment is used to quickly build project files and directories, and provides various plug-ins to automate common programs in the development process, such as code compression and code detection, unit testing ....

Grunt installation first you have to ensure that you have installed the node environment, if not installed, please move to the http://www.nodejs.org/download/ (novice Please download the EXE installation package one-click installation free of tossing );

 

We recommend that you add the project to the local server because some grunt plug-ins can run normally in the server environment;

Grunt's three major components:

Pakeage. JSON // The grunt project information and the plug-in Declaration on which the project depends; gruntfile. JS // grunt work configuration file, plug-in settings, task settings, and so on; node_modules folder // after you install the next grunt platform, this folder will appear in the project root directory, where various core files and plug-in files of the grunt platform are installed;

 

Grunt installation process:

 

Right-click the project directory SHIFT +, and choose here to open the Run window (CMD); enter NPM install-G; to install grunt (ensure that the directory has pagage. JSON and gruntfile. JS files );

If grunt is successfully installed, a node_modules folder will appear in the root directory of your project. This is fine;

 

Grunt's core concepts:

Package. JSON // set the project information and declare the dependency (required) Plug-in information;

{"Name": "Just-a-demo", // project name. The string cannot contain spaces. "version": "0.1.0", // project version number "devdependencies ": {// These are the grunt plug-ins to be introduced in this project. "*" indicates the latest version; "grunt ":"~ 0.4.1 "," Grunt-contrib-jshint ":" * "," Grunt-contrib-qunit ":" * "," Grunt-contrib-nodeunit ":"*", "Grunt-contrib-uglify": "*", "Grunt-contrib-watch ":"*"}}

Gruntfile. js // Project Task configuration and plug-in configuration;

// All the configuration code of the grunt project must be placed in the following function; module. exports = function (grunt) {// configure grunt for the project. initconfig ({PKG: grunt. file. readjson ('package. JSON '), // specify the package file to facilitate the plug-in to reference the package. JSON information;
// The following is the configuration of various plug-ins, in the format of plug-in name: {configuration key: Configuration value ,...};
Uglify: {// todo: This is the plug-in for compressing code -- uglify; options: {// automatically insert comments to the merged file; banner :'/*! This is the compressed code from brother wolf !! <% = Grunt. template. today ("yyyy-mm-dd") %> */\ n'}, build: {// a single file to be merged | multiple files; SRC: ['src/<% = PKG. name %>. JS ', 'src/not-a-demo.js'], // output directory and file name; DEST: 'build/<% = PKG. name %>. min. js'} // load the grunt plug-in that provides the "uglify" task. loadnpmtasks ('grunt-contrib-uglify '); // create a task 'default' as the default grunt task. Run the grunt command in cmd to run the task. Other tasks must run the "grunt Task Name; grunt. registertask ('default', ['uglify ', 'qunit']); grunt. registertask ('Sam ', ['uglify']);};

 

The complete process is:

1. Copy package. JSON and gruntfile. js to the project root directory;

2. Right-click the root directory of the current project, select the current directory, open the Run window, and enter NPM install for grunt installation;

3. Enter grunt to execute the default grunt task, or enter the grunt Task Name to execute the custom task;

4. For specific plug-ins, write the plug-in name into devdependencies in package. JSON, and then write the plug-in configuration in gruntfile. js in grunt. initconfig;

Write this command below gruntfile. js to load the required plug-in: grunt. loadnpmtasks ('grunt-contrib-uglify 名 ');

Create a task below gruntfile. JS: grunt. registertask ('test', ['plug-in short name']);

If you have added a plug-in, you must install NPM; reinstall grunt once; otherwise, an error will be reported!

 

Next, you can play grunt happily in the current project directory through the command station. It's just a bit simple to write about it ~~ Flowers clapping and kissing. Come on !!!!!

Implementation notes of grunt frontend automated Development Process