Gruntfile.js配置全攻略

一般来说，直接使用模板作为配置文件。

module.exports = function(grunt) { "use strict"; grunt.initConfig({ //插件配置区域 }); //加载插件任务，要使用谁就添加谁 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-p_w_picpathmin'); // 注册任务 grunt.registerTask('default', ['cssmin', 'p_w_picpathmin', 'uglify']); };

grunt.loadNpmTasks()是加载插件任务。其实就是说，你如果要使用哪个插件的功能，请在这部分用这句代码把插件任务添加进去。
grunt.registerTask()是注册任务，默认有一个default。默认的意思就是说，你最后使用的时候，在目录的命令提示符里直接输入grunt便可以执行注册的任务，相当于执行了default这个任务。

使用自定义任务

可以注册更多的任务命令，使用其他的命名。比如

grunt.registerTask('custom', ['cssmin', 'p_w_picpathmin']);

对应使用的时候，输入：

grunt custom

gruntfile.js例子如下：

module.exports = function (grunt) {

    'use strict';

    grunt.initConfig({

        less: {

          // 开发环境

          development: {

            options: {

              paths: ["css"]  // @import 加载文件的路径

            },

            files: {

              "css/style.css": "css/style.less"  // 将path/to/source.less编译为path/to/result.css

            }

          },

          // 线上环境

          production: {

            options: {

              paths: ["css"],  // @import 加载文件的路径

              cleancss: true,     // 压缩css文件

              modifyVars: {   // 重新定义全局变量

                imgPath: '"http://mycdn.com/path/to/p_w_picpaths"',

                bgColor: 'red'

              }

            },

            files: {

              "css/style.css": "css/style.less"

            }

          }

        },

        concat : {

            css : {

                src: ['css/*.css'],

                dest:'css/asset/all.css'

            }

        },

        cssmin: {

            css: {

                src:'css/asset/all.css',

                dest:'css/asset/all-min.css'

            }

        },

        //压缩整个文件夹下的所有文件

           cssminAll:{

            css: {

                expand: true,

                //相对路径

                cwd: 'css/',

                src:'*.css',

                dest:'css/asset'

            }

    });

    grunt.loadNpmTasks('grunt-contrib-less');

    // 开发环境

    grunt.registerTask('lessDev', ['less:development']);

    // 线上环境

    grunt.registerTask('lessPro', ['less:production']);

    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 默认任务

    grunt.registerTask('default', ['concat','cssmin']);

};