Grunt-サンプルファイル

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

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

上記のすべてのプラグインをインストールし、簡単な作成するには、以下の手順に従っGruntfile.jsを-

Step 1−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−ここで、JavaScriptを縮小するためにuglifyという別のタスクを作成しましょう。

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 %>']
      }
   }
}

上記のタスクは、縮小された.jsファイルを含むdist /フォルダー内にファイルを作成します。ザ・<%= concat.dist.dest %>concatタスクが生成するファイルを縮小するようにuglifyに指示します。

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ファイルのコーディング違反を探します。

Step 7−次に、指定されたファイルの変更を検索し、指定されたタスクを実行する監視タスクがあります。

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−最後に、デフォルトのタスクを定義する必要があります。

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

デフォルトのタスクは、単に次のように入力して実行することができイサキコマンドラインでコマンドを。

これが完全な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']);

};