grunt

Posted on July 20, 2014

安装

  • npm install -g grunt-cli

    安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt

  • 对于已经有package.json的项目引入grunt:

    npm install grunt --save-dev 将创建Gruntfile.js, 并自动写入devDependencies 配置段中

    npm install grunt-contrib-jshint --save-dev


Gruntfile 配置

module.exports = function(grunt) { //"wrapper" 函数

  // Project configuration.
  grunt.initConfig({ //初始化配置对象, 配置对象只是对任务的配置信息, 任务是grunt.loadNpmTasks加载的
    pkg: grunt.file.readJSON('package.json'), //引入package.json元数据
    uglify: { //第一层为task, 第二层为target(除去options)
      options: { //任务选项
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' //<% %>可以读取整个配置对象内容
      },
      build: {
        options: {....} //目标选项, 将覆盖任务选项, 如果目标没有自己的选项, 将使用任务选项
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    },

    // 任意数据。
    my_property: 'whatever',
    my_src_files: ['foo/*.js', 'bar/*.js'],
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify'); //需要是声明在dependency中的包,并通过npm install安装之后

  // 默认被执行的任务列表。 grunt default 或者 grunt
  grunt.registerTask('default', ['uglify']); //任务数组可带参数

  // 其他自定义任务
  grunt.registerTask('logit', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });
};

使用

  • grunt --help 列出所有可用的任务

  • grunt 任务名 将遍历所有目标(target)并依次处理

  • grunt 任务名:目标名 执行该任务中指定的目标

  • 模板

    • 可以读取整个配置对象内容

    • grunt以及它的方法都是可用的

    • 执行控制流

  • 导入外部数据

    Grunt有grunt.file.readJSONgrunt.file.readYAML两个方法分别用于引入JSON和YAML数据

文件

TODO