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']);};