Grunt - Tệp mẫu

Trong chương này, chúng ta hãy tạo một tệp Grunt đơn giản bằng các plugin sau:

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

Cài đặt tất cả các plugin ở trên và làm theo các bước dưới đây để tạo một Gruntfile.js đơn giản -

Step 1- Bạn cần tạo một hàm wrapper , đóng gói các cấu hình cho Grunt của bạn.

module.exports = function(grunt) {};

Step 2 - Khởi tạo đối tượng cấu hình của bạn như hình dưới đây -

grunt.initConfig({});

Step 3- Tiếp theo, đọc cài đặt dự án từ tệp package.json vào thuộc tính pkg . Nó cho phép chúng tôi tham chiếu đến các giá trị thuộc tính trong tệp package.json của bạn .

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

Step 4- Tiếp theo, bạn có thể xác định cấu hình cho các tác vụ. Hãy để chúng tôi tạo ra nhiệm vụ đầu tiên của chúng tôi concat để nối tất cả các file mà có mặt trong src / thư mục và lưu trữ nối .js tập tin dưới dist / thư mục.

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- Bây giờ, chúng ta hãy tạo một tác vụ khác có tên là uglify để giảm thiểu JavaScript của chúng ta.

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

Tác vụ trên tạo một tệp trong thư mục dist / có chứa các tệp .js đã được rút gọn. Các<%= concat.dist.dest %>sẽ hướng dẫn uglify thu nhỏ tệp mà tác vụ kết hợp tạo ra.

Step 6- Hãy để chúng tôi cấu hình plugin JSHint bằng cách tạo tác vụ 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,
      }
   }
}

Tác vụ jshint ở trên chấp nhận một mảng tệp và sau đó là một đối tượng tùy chọn. Tác vụ trên sẽ tìm kiếm bất kỳ vi phạm mã hóa nào trong các tệp Gruntfile.js và src / ** / *. Js .

Step 7- Tiếp theo, chúng ta có nhiệm vụ xem tìm kiếm các thay đổi trong bất kỳ tệp nào được chỉ định và chạy các tác vụ bạn chỉ định.

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

Step 8- Tiếp theo, chúng ta phải tải các plugin Grunt đã được cài đặt qua _npm .

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-concat');

Step 9- Cuối cùng, chúng ta phải xác định nhiệm vụ mặc định .

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

Tác vụ mặc định có thể được chạy bằng cách chỉ cần gõ lệnh grunt trên dòng lệnh.

Đây là Gruntfile.js hoàn chỉnh của bạn -

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

};