? Grunt series tutorials (1)

? One of grunt series tutorials

? Grunt is a powerful automated building tool that can automatically execute your custom tasks and help you compile, compress, and perform unit tests. It can greatly reduce the workload as a programmer. All the boring and repetitive work should be done by grunt!

? There are many plug-ins in grunt, which can be directly used by the official team. If you think this is not enough, you can write a plug-in yourself and release it to NPM.

? Common grunt plug-ins include:

1. ? Less

2. Handlebars

3. Jade

4. JS hint

5. Watch
   

? Next we will take less as an example to see how to use grunt to compile less into CSS and compress it.

? First, install the grunt command line (CLI) to the global variable through NPM.

    npm install -g grunt-cli

? After the CLI is installed, you can create a grunt project to run it.

? Create a new grunt folder and create the package. JSON and gruntfile. js files in grunt.

? Package. JSON is the configuration information. You can configure the plug-in to be imported and some variables or constants.

    {          "name": "XXX",      "version": "0.1.0",      "devDependencies": {        "grunt": "~0.4.2",        "grunt-contrib-jshint": "~0.6.3",        "grunt-contrib-nodeunit": "~0.2.0",        "grunt-contrib-uglify": "*",        "grunt-contrib-less": "*",        "grunt-contrib-concat":"*",        "grunt-contrib-yuidoc": "*",        "grunt-contrib-cssmin":"*",        "grunt-contrib-watch":"*"      }    }

? ? Gruntfile. JS is the task configuration and can be understood as the main entry of the program.

    module.exports = function(grunt) {        grunt.initConfig({            less: {                compile: {                    files: {                        ‘a.less‘                    }                }            },            cssmin:{                minify: {                    expand: true,                    src: [‘a.css‘],                    dest: ‘‘,                    ext: ‘.min.css‘                }            },            watch: {                css: {                    files: [‘/*.less‘],                    tasks: [‘less‘,‘cssmin‘]                }            },        });        grunt.loadNpmTasks(‘grunt-contrib-less‘);        grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);        grunt.loadNpmTasks(‘grunt-contrib-watch‘);                grunt.registerTask(‘default‘, [‘less‘,"cssmin","watch"]);    };

? In the current directory, enter grunt in the command line to start the less, cssmin, and watch tasks.

? The above code is explained below.

? Hosts file. The ultimate a.min.css file.

? Let's take a look at the magic watch plug-in. In project development, it is impossible for us to manually execute the command grunt every time a. Less is modified. Therefore, we need to change the listening file, which is watch. In the configuration, we use the watch plug-in to listen to all the less files in the current directory. If there is any change, the less and cssmin plug-ins will be executed again. Is it convenient?

? The above is the simplest example of using grunt. later articles will explain grunt's more features and plug-ins in detail.

Article forevercjl

Article link: http://blog.csdn.net/forevercjl/article/details/38590305