Grunt学习--安装Grunt并简单配置Grunt

1、初始化项目

npm init

2、全局安装

npm install -g grunt-cli

3、本地安装

npm install grunt --save-dev

会在项目的根目录下生成package.json

需要手动添加Grunt.js或Grunt.coffee文件

Grunt.js或Grunt.coffee文件的首字母必须大写
这与gulp和webpack不同

可以用以下代码初始化Grunt.js或Grunt.coffee文件:

module.exports = function(grunt) {
  //项目任务的初始化
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  //加载Grunt任务的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Grunt命令被执行的任务列表
  grunt.registerTask('default', []);

};

grunt常用的插件

package.json文件中：

{
  "name": "gruntlearnexample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.2.1",
    "grunt-contrib-clean": "^2.0.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^3.0.0",
    "grunt-contrib-htmlmin": "^3.1.0",
    "grunt-contrib-jshint": "^2.1.0",
    "grunt-contrib-nodeunit": "^2.1.0",
    "grunt-contrib-uglify": "^5.0.0",
    "grunt-contrib-watch": "^1.1.0"
  }
}

在下面的案例中，grunt.file.readJSON(‘package.json’) 将存储在package.json文件中的JSON元数据引入到grunt config中
由于<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作。

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});