Grunt-创建任务

Grunt是一个JavaScript任务运行器，可用于自动化执行常见的开发任务。使用Grunt，您可以将任务定义为JavaScript模块，然后使用Grunt CLI运行这些任务。

安装Grunt

使用npm安装Grunt

npm install -g grunt-cli

创建Gruntfile.js

在项目根目录创建一个Gruntfile.js文件，该文件包含任务的定义。

module.exports = function(grunt) {
  // 任务定义
};

Grunt的大部分功能都是通过内置任务完成的，您可以将这些任务用作您的项目构建流程的一部分。您也可以编写自定义任务以扩展Grunt。

以下是一个简单的Gruntfile.js文件，其中包含两个内置任务，分别用于复制文件和压缩文件。

module.exports = function(grunt) {
  grunt.initConfig({
    copy: {
      main: {
        src: 'src/app.js',
        dest: 'dist/app.js',
      },
    },
    uglify: {
      my_target: {
        files: {
          'dist/app.min.js': ['dist/app.js'],
        },
      },
    },
  });

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

  // 注册默认任务
  grunt.registerTask('default', ['copy', 'uglify']);
};

Grunt任务

Grunt任务由任务配置和任务本身组成。任务配置定义任务的行为，而任务本身实现这些行为。

在Gruntfile.js中定义任务配置。

grunt.initConfig({
  jshint: {
    all: ['src/**/*.js', 'test/**/*.js'],
    options: {
      globals: {
        jQuery: true,
      },
    },
  },
});

jshint任务配置了要执行的文件和选项。例如，all属性指定要检查的文件列表，options定义了JSHint的全局变量选项。

grunt.config('jshint', {
  all: ['src/**/*.js', 'test/**/*.js'],
  options: {
    globals: {
      jQuery: true,
    },
  },
});

任务本身通常是一个npm模块，该模块导出一个函数可以接收grunt的实例，并执行任务的操作。如下所示：

module.exports = function(grunt) {
  grunt.registerTask('my_task', function() {
    console.log('Hello World!');
  });
};

Grunt插件

Grunt插件是提供任务的npm模块。例如，grunt-contrib-jshint插件提供了JSHint任务。

通过npm安装Grunt插件。

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

加载Grunt插件

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

使用grunt-contrib-jshint插件

grunt.initConfig({
  jshint: {
    all: ['src/**/*.js', 'test/**/*.js'],
    options: {
      globals: {
        jQuery: true,
      },
    },
  },
});

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

grunt.registerTask('default', ['jshint']);

Grunt命令

使用grunt命令运行任务，grunt命令将使用Gruntfile.js中定义的任务列表。

grunt default

结论

Grunt提供了一种流畅的方式来定义和运行任务，以便自动化项目的构建流程。它可以编写自定义任务和使用npm安装Grunt插件，从而扩展其功能。

Happy coding!