Getting Started with grunt (ZZ)

The following describes the basic use of grunt, the front-end project to a JS file, merged together, and compression.

Note that the example is in the grunt 0.4.5 version, and the lower version may differ in configuration.

Tools/Materials

• Node

Method/Step

2. First install GRUNT-CLI in the Global environment with NPM, and note that install-g are the same in any directory

   NPM install-g GRUNT-CLI

4. When installing the grunt plug-in, the project must be Package.json, so add one of the simplest Package.json in the project. Otherwise the plugin is not installed.

6. Installing grunt in the project directory

   NPM instal Grunt--save-dev

8. I often need concat and compression in front-end projects, so just cover up the two plugins

   NPM Install Grunt-contrib-concat grunt-contrib-uglify--save-dev

10. Merge all JS from the development directory into the Dist directory and save as Main.js

    Concat: {

    Dist: {

    The files to concatenate

    SRC: [' src/*.js '],

    The location of the resulting JS file

    Dest: ' Dist/main.js '

    }

    }

    Put JS in the merged directory, compress

    Uglify: {

    Dist: {

    Files: {

    ' Dist/main.min.js ': [' <%= concat.dist.dest%> ']

    }

    }

    }

    If you do not use ' <%= concat.dist.dest%> ', but direct write path dist/main.js, it is likely that Main.js has not been generated during compression

    All code such as

12. After running grunt, the results are as follows

14. 7

    This is the content under the Dist folder.

    
    Source: http://jingyan.baidu.com/article/546ae185058da31149f28ce1.html

From for notes (Wiz)

Getting Started with grunt (ZZ)