Grunt - 示例文件

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

• grunt-contrib-uglify

• grunt-contrib-concat

• grunt-contrib-jshint

• grunt-contrib-watch

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

第1步 : 你需要创建一个包装器函数，它封装了你的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: {
      // define a string to insert between files in the concatenated output
      separator: ';'
   },
   dist: {
      // files needs to be concatenated
      src: ['src/**/*.js'],
      // location of the concatenated output JS file
      dest: 'dist/.js'
   }
}

第5步 : 现在，让我们创建另一个名为 uglify 的任务来缩小我们的JavaScript.

uglify: {
   options: {
      // banner will be inserted at the top of the output which displays the date and time
      banner: '/*!   */\n'
   },
   dist: {
      files: {
         'dist/.min.js': ['']
      }
   }
}

上述任务在 dist /文件夹中创建一个包含缩小的.js文件的文件. 将指示 uglify 缩小concat任务生成的文件.

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

jshint: {
   // define the files to lint
   files: ['Gruntfile.js', 'src/**/*.js'],
   // configure JSHint
   options: {
      // more options here if you want to override JSHint defaults
      globals: {
         jQuery: true,
      }
   }
}

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

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

watch: {
   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步 : 最后，我们必须定义默认任务.

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

只需在命令行输入 grunt 命令即可运行默认任务.

这是你完整的 Gruntfile.js :

module.exports = function(grunt) {

   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      concat: {
         options: {
            separator: ';'
         },
         dist: {
            src: ['src/**/*.js'],
            dest: 'dist/.js'
         }
      },
      uglify: {
         options: {
            banner: '/*!   */\n'
         },
         dist: {
            files: {
               'dist/.min.js': ['']
            }
         }
      },
      jshint: {
         // define the files to lint
         files: ['Gruntfile.js', 'src/**/*.js'],
         // configure JSHint
         options: {
            // more options here if you want to override JSHint defaults
            globals: {
               jQuery: true,
            }
         }
      },
      watch: {
         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']);

};