Grunt - 示例文件

在本章中，让我们使用以下插件创建一个简单的 Grunt 文件 −

• grunt-contrib-uglify
• grunt-contrib-concat
• grunt-contrib-jshint
• grunt-contrib-watch

安装上述所有插件并按照以下步骤创建一个简单的 Gruntfile.js −

步骤 1 − 您需要创建一个 wrapper 函数，该函数封装了 Grunt 的配置。

module.exports = function(grunt) {};

步骤 2 − 初始化您的配置对象，如下所示 −

grunt.initConfig({});

步骤 3 − 接下来，将 package.json 文件中的项目设置读入 pkg 属性。它使我们能够引用 package.json 文件中的属性值。

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

步骤 4 − 接下来，您可以定义任务的配置。让我们创建第一个任务 concat 来连接 src/ 文件夹中存在的所有文件，并将连接的 .js 文件存储在 dist/ 文件夹下。

concat: {
   options: {
      // 定义一个字符串，插入到连接输出的文件之间
      separator: ';'
   },
   dist: {
      // 文件需要连接
      src: ['src/**/*.js'],
      // 连接的输出 JS 文件的位置
      dest: 'dist/<%= pkg.name %>.js'
   }
}

步骤 5 −现在，让我们创建另一个名为 uglify 的任务来压缩我们的 JavaScript。

uglify: {
   options: {
      // 横幅将插入到显示日期和时间的输出顶部
      banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */
'
   },
   dist: {
      files: {
         'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
      }
   }
}

上述任务在 dist/ 文件夹中创建一个文件，其中包含已压缩的 .js 文件。<%= concat.dist.dest %> 将指示 uglify 压缩 concat 任务生成的文件。

第 6 步 − 让我们通过创建 jshint 任务来配置 JSHint 插件。

jshint: {
    // 定义要进行 lint 的文件
    files: ['Gruntfile.js', 'src/**/*.js'],
    // 配置 JSHint
   	options: {
      // 如果你想覆盖 JSHint 默认值，这里有更多选项
      globals: {
         jQuery: true,
      }
   }
}

上述 jshint 任务接受文件数组，然后接受选项对象。上述任务将查找 Gruntfile.js 和 src/**/*.js 文件中是否存在任何编码违规。

第 7 步 − 接下来，我们有 watch 任务，该任务查找任何指定文件中的更改并运行您指定的任务。

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

第 8 步 − 接下来，我们必须加载已通过 _npm 安装的所有 Grunt 插件。

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

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

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

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

第 9 步 − 最后，我们必须定义 default 任务。

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

只需在命令行中输入 grunt 命令即可运行 default 任务。

这是完整的 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() %> */
'
         },
         dist: {
            files: {
               'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
            }
         }
      },
      jshint: {
         // 定义要进行 lint 的文件
         files: ['Gruntfile.js', 'src/**/*.js'],
         // 配置 JSHint
         options: {
            // 如果你想覆盖 JSHint 默认值，这里有更多选项
            globals: {
               jQuery: true,
            }
         }
      },
      watch: {
         files: ['<%= jshint.files %>'],
         tasks: ['jshint']
      }
   });

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

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

};