Grunt-サンプルファイル

この章では、次のプラグインを使用して簡単なGruntファイルを作成しましょう-

grunt-contrib-uglify
うなり声-連結-連結
うなり声-contrib-jshint
うめき声

上記のすべてのプラグインをインストールし、以下の手順に従って単純な_Gruntfile.js_を作成します-

ステップ1 *-Gruntの設定をカプセル化する_wrapper_関数を作成する必要があります。

module.exports = function(grunt) {};

ステップ2 *-以下に示すように構成オブジェクトを初期化します-

grunt.initConfig({});

ステップ3 *-次に、_package.json_ファイルのプロジェクト設定を_pkg_プロパティに読み込みます。これにより、yourpackage.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': ['']
      }
   }
}

上記のタスクは、縮小された.jsファイルを含む_dist_/フォルダー内にファイルを作成します。 **は、concatタスクが生成するファイルを縮小するよう_uglify_に指示します。

ステップ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 *-最後に、_default_タスクを定義する必要があります。

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

_default_タスクは、コマンドラインで_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']);

};

Grunt-sample-file

Grunt-サンプルファイル