Grunt 学习笔记 The JavaScript Task Runner

GRUNT: The JavaScript Task Runner
JavaScript 任务执行器,类似于 Java 中的 Ant 和 Maven。
Grunt 的生态系统很大,包括很多的插件。

为什么需要 Task Runner

简而言之:自动化。
在执行一些重复性的工作时,例如代码压缩,编译,单元测试,代码质量检测等等,Task Runner 使得用户的操作更简单。
通过配置 Gruntfile 文件,Task Runner 可以自动执行相关的任务。

Grunt 的使用

Grunt 的安装

通过 Node 来安装 Grunt。
package.json 文件的 devDependencies 属性中配置 Grunt 及相应插件的版本。随后执行命令 npm install

package.json 文件

package.json 文件的规范参考 https://docs.npmjs.com/files/package.json

package.json 文件位于项目的根目录,与 Gruntfile.js 文件并列。
执行 npm install 命令来安装对应版本的 Grunt 及相应插件。

package.json 文件示例如下:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

Gruntfile.js 文件

Gruntfile.js 文件包含4个部分:

  • The "wrapper" function
    如下:
module.exports = function(grunt) {
  // Do grunt-related things in here
};
  • Project and task configuration 任务的配置
  • Loading Grunt plugins and tasks
  • Custom tasks 自定义任务
    如下:
grunt.registerTask('unittest', [
    'clean:build',
    'mkdir:build',
    'copy:build',
    'karma:unit'
]);

一个完整的示例如下:

module.exports = function(grunt) {

  // Project configuration.
  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'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

关于任务的创建,可以参考 Creating tasks


引用:
Grunt 官网

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,403评论 19 139
  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Gru...
    你不知道的你我不知道的我阅读 2,905评论 0 0
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 4,714评论 0 8
  • Grunt配置 Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定...
    慢狍子阅读 3,555评论 0 1
  • 那天晚上,你从长治来到了家里,小小的毛茸茸的,两只黄黄的耳朵耷拉在脑袋两边,一碗水你喝了大半碗,拉了好几堆。 ...
    kkll123阅读 1,631评论 0 0