Getting started with Grunt-based version building system

Getting started with Grunt-based version building system

Author: zhanhailiang Date:

1. Install nodejs, npm, and grunt-cli. For details, see install nodejs + npm + grunt-cli in Windows.

2. Create a test project directory as follows:

The file templates are as follows: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + CnNyYy9pbmRleC5qczwvcD4KPHByZSBjbGFzcz0 = "brush: java;"> var a = 1; var B = 2; function test () {alert (1);} var test2 = function () {return 3 ;}; test (); test2 ();

Package. json (this template is available for beginners)

{  "name": "test",  "version": "1.0.0",  "description": "test",  "author": "",  "dependencies": {},  "devDependencies": {   }}

Gruntfile. js (js compression build task)

Module. exports = function (grunt) {// configure grunt. initConfig ({pkg: grunt. file. readJSON ('package. json '), uglify: {build: {src: 'src/index. js', dest: 'dest/index. min. js '}}); grunt. loadNpmTasks ('grunt-contrib-uglify '); // register the default task grunt. registerTask ('default', ['uglify ']);};

3. Run the command in the root directory of the current test project.Npm install grunt-contrib-uglify-save-devInstall the corresponding dependency module (Note:-save-dev automatically updates the dependency module to the package. json file ):

4. Run the command in the current test directory.GruntBuild task implementation version build task:

5. Now that the build of the version task is complete, you can note that the corresponding compressed file is generated in the dest directory:

This simple tutorial allows you to Implement CSS compression, html compression, image compression, and other related version building tasks.

In short, grunt is quite powerful, and I will share more detailed grunt tutorials in the future.

References

1. Getting started
2. Using GruntJS to build Web programs (2)

   Appendix

   We recommend that you use the grunt-init tool to automatically create a project. The following list of templates are officially maintained:

   1. Grunt-init-commonjs-Create a commonjs module, including Nodeunit tests.
   2. Grunt-init-gruntfile-Create a basic Gruntfile.
   3. Grunt-init-gruntplugin-Create a Grunt plugin, including Nodeunit tests.
   4. Grunt-init-jquery-Create a jQuery plugin, including QUnit tests.
   5. Grunt-init-node-Create a Node. js module, including Nodeunit tests.