Gruntfile 示例 Sample Gruntfile

原文:https://github.com/gruntjs/grunt/wiki/Sample-Gruntfile

下面我们介绍和分析一个 Gruntfile 示例,其中使用了 5 个 grunt 插件:

完整的 Gruntfile 在页面底部,但是如果你继续读下去,我们会每次只处理一步。

第一个部分是”包裹“函数,封装你的 Grunt 配置。

module.exports = function(grunt) {
}

在“包裹”函数中,我可以稍后初始化我们的配置对象:

grunt.initConfig({
});

接下来,我们可以从文件 package.json 读取项目配置到属性 pkg。这使得我们可以引用文件 package.json 中的属性值,我很快就会看到这一点。

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

到目前为止的 Gruntfile:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json');
  });
};

现在,我们可以为每个任务定义配置。一个任务的配置对象挂在整个配置对象的一个属性上,属性名与任务同名。因此,任务 “concat” 在配置对象中对应一个属性 “concat”。下面是任务“concat”的配置对象。

concat: {
  options: {
    // define a string to put between each file in the concatenated output
    separator: ';'
  },
  dist: {
    // the files to concatenate
    src: ['src/**/*.js'],
    // the location of the resulting JS file
    dest: 'dist/<%= pkg.name %>.js'
  }
}

请注意我是如何在 JSON 文件中应用属性 name 的。我们通过使用 pkg.name 来访问,在前面我们定义了属性 pkg 为文件 package.json 的加载结果,它被解析为一个 JavaScript 对象。Grunt 拥有简单的模板引擎,来输出配置对象中的属性值。在这里,我告诉任务 concat 合并 src/ 下以 .js 结尾的所有文件。

现在,让我们配置 uglify 插件,压缩我们的 JavaScript 代码:

uglify: {
  options: {
    // the banner is inserted at the top of the output
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}

上面的配置告诉任务 uglify 在 dist/ 下创建一个包含了压缩后的 JavaScript 的文件。在这里,我使用了 <%= concat.dist.dest %>,因此 uglify 将压缩任务 concat 产生的文件。

QUnit 插件非常易于设置。你只需要给定测试运行文件的位置,QUnit 在这些 HTML 文件上运行。

qunit: {
  files: ['test/**/*.html']
},

JSHint 插件的配置也很简单:

jshint: {
  // define the files to lint
  files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
  // configure JSHint (documented at http://www.jshint.com/docs/)
  options: {
    // more options here if you want to override JSHint defaults
    globals: {
      jQuery: true,
      console: true,
      module: true
    }
  }
}

JSHint 简单的接受一个文件数组和一个选项对象。JSHint 网站上的文档描述了所有的选项。如果用 JSHint 默认值用的很开心,就没有必要在 Gruntfile 中重新它们。

最后,我们还有 watch 插件:

watch: {
  files: ['<%= jshint.files %>'],
  tasks: ['jshint', 'qunit']
}

可以在命令行中通过 grunt watch 来运行它。当它检测到任何指定的文件发生变化时(在这里,我只是使用了与 JSHint 相同的文件),它将运行指定的任务,按照出现的顺序。

最后,我们必须加载所需的 Grunt 插件。它们应该已经通过 npm 安装了。

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');

并且在最后我们设置了一些任务。其中最重要的是 default 任务:

// this would be run by typing "grunt test" on the command line
grunt.registerTask('test', ['jshint', 'qunit']);

// the default task can be run just by typing "grunt" on the command line
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

下面是完成后的 Gruntfile.js

module.exports = function(grunt) {
  //
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });
  //
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  //
  grunt.registerTask('test', ['jshint', 'qunit']);
  //
  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};
posted @ 2013-10-19 13:29  agile30353  阅读(198)  评论(0编辑  收藏  举报