示例文件（Sample File）

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

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

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

Step(1): Create a folder called work for example. Our work folder contains following sub-folders and files:

• Src - Location of pre-processed HTML source files and folders.

  • Images - Contains images which are uncompressed.

  • Scripts - Contains multiple pre-processed script files.

  • Styles - Contains multiple pre-processed CSS files.

• Build - This folder will be created automatically which contains the production files.

  • Images - Contains compressed images.

  • Scripts - Single script file that contains minified codes.

  • Styles - Single CSS file that contains minified codes.

• gruntfile.js - It is used to define our configuration, tasks and load Grunt plugins.

• package.json - It is used to store metedata for projects published as npm modules. You can list grunt and Grunt plugins that is required by your project as devDependencies.

Step 1 - 您需要创建一个wrapper函数，它封装了Grunt的配置。

module.exports = function(grunt) {};

Step 2 - 初始化配置对象，如下所示 -

grunt.initConfig({});

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

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

Step 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/<%= pkg.name %>.js'
   }
}

Step 5 - 现在，让我们创建另一个名为uglify任务来缩小我们的JavaScript。

uglify: {
   options: {
      // banner will be inserted at the top of the output which displays the date and time
      banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
   },
   dist: {
      files: {
         'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
      }
   }
}

上面的任务在dist /文件夹中创建一个文件，其中包含缩小的.js文件。 《%= concat.dist.dest %》将指示《%= concat.dist.dest %》缩小concat任务生成的文件。

Step 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 Gruntfile.js文件中的任何编码违规。

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

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

Step 8 - 接下来，我们必须加载已经通过_npm安装的Grunt插件。

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

Step 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() %> */\n'
         },
         dist: {
            files: {
               'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
            }
         }
      },
      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: ['<%= 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']);
};