grunt安装配置

1、安装nodeJs环境（包含npm）

2、$ npm install -g grunt-cli //可调用与Gruntfile在同一目录中的Grunt版本

3-1、$ npm install -g grunt-init 大部分 grunt-init 模版都会自动创建特定于项目的package.json文件

3-2、$ npm init //命令会创建一个基本的package.json文件,一步步设置回车。

 

C:\Users\***\AppData\Roaming\npm\node_modules\grunt-init

 

     {

  "name": "main",//文件名

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

  }

}

3-3、根据需要做扩充

     $ npm install grunt --save-dev

//向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。

此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中，

eg:$ npm install grunt-contrib-uglify;

 

  "devDependencies": {

    "grunt": "~0.4.1",

    "grunt-contrib-jshint": "~0.6.3",

    "grunt-contrib-uglify": "~0.2.1",

    "grunt-contrib-requirejs": "~0.4.1",

    "grunt-contrib-copy": "~0.4.1",

    "grunt-contrib-clean": "~0.5.0",

    "grunt-strip": "~0.2.1"

  }

 

4、添加Gruntfile.js文件

module.exports = function(grunt){

 

    // 项目配置

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        uglify: {//grunt-contrib-uglify 插件的同名属性

            options: {

                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

               //用于在文件顶部生成一个注释

            },

            build: {//用于将一个js文件压缩为一个目标文件。

                src: 'src/<%=pkg.name %>.js',

                dest: 'build/<%= pkg.name %>.min.js'

            }

        }

    });

    //只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：

    // 加载提供"uglify"任务的插件

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

 

//自定义任务

    // 默认任务

    grunt.registerTask('default', ['uglify']);或者

    grunt.registerTask('default', 'Log some stuff.', function() { grunt.log.write('Logging some stuff...').ok(); });

    特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks方法加载。

}

 

5、$ grunt