相关文章
  Grunt-示例文件 
  

Grunt-示例文件


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

  • 咕unt作tri
  • grunt-contrib-concat
  • grunt-contrib-jshint
  • 咕-咕tri的手表

安装上述所有插件,并按照以下步骤创建简单的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任务接受一个文件数组,然后接受一个options对象。上面的任务将查找Gruntfile.jssrc / ** / * 。js文件中的任何编码冲突。

步骤7-接下来,我们有监视任务,该任务查找任何指定文件中的更改并运行您指定的任务。

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

};
error: 内容受到保护 !!