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

步驟 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 %> 將指示 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: ['<%= jshint.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']);

可以透過在命令列上鍵入 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']);

};