Sử dụng tác vụ watch trong Grunt

Tác vụ watch

Package grunt-contrib-watch nó cung cấp tác vụ có tên là watch, cho phép bạn giám sát các file bạn chỉ ra, mỗi khi nội dung file đó thay đổi thì tác vụ này tự động chạy một vài tác vụ khác.

Để cài đặt package grunt-contrib-watch cho thêm vào package.json dòng:

"grunt-contrib-watch": "1.0.1"

{
  "name": "my_project",
  "version": "0.1.0",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "grunt": "~0.4.5",
    "grunt-babel": "^8.0.0",
    "grunt-contrib-concat": "~1.0.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-jshint": "2.0.0",
    "grunt-contrib-clean": "2.0.0",
    "grunt-contrib-watch": "1.0.1"
  }
}

Sau đó chạy lệnh để cài

npm install

Sử dụng watch khai báo tác vụ cơ bản trong Gruntfile.js như sau:

watch: {
    src: {
        files: ['các file giám sát'],
        tasks: ['tác vụ chạy'],
      },
},

File nào cần giám sát thì bạn chỉ ra trong mảng, ví dụ sẽ giám sát tất cả các file js trong thư mục src thì là: files: ['src/*.js']

Khi thấy file giám sát thay đổi chạy tác vụ nào thì liệt kê ra trong mảng tasks, tác vụ là tên những tác vụ khai báo trong grunt.initConfig, ở ví dụ trước có các tác vụ như uglify, concat:build ... Đồng thời bạn cũng được phép chỉ ra tác vụ đăng ký bởi grunt.registerTask ví dụ default

Áp dụng watch

Trở lại ví dụ trước (Chạy nhiều tác vụ), ở đó khi gõ lệnh grunt sẽ chạy 5 tác vụ đã đăng ký default, để cuối cùng có file hello.min.js.

Bây giờ ta sẽ áp dụng watch, để mỗi khi file nguồn js thay thay đổi nó tự động thi hành 5 tác vụ trên.

Sửa lại Gruntfile.js như sau:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        watch: {
            src: {
                files: ['src/*.js'],
                tasks: ['default'],
              },
        },

        uglify: {
            options: {
                banner: '/*! <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },

            build: {
                files: {
                    'build/hello.min.js' : ['tmp/all_back.js']
                }
            },
        },
        concat: {
          build: {
            files: {
                'tmp/all.js' : ['src/hello.js', 'src/ab.js']
            }
          }
        },

        babel: {
            options: {
                presets: ['@babel/preset-env']
              },
              build: {
                files: {
                  'tmp/all_back.js': 'tmp/all.js'
                }
              }

        },

        jshint: {
            options: {
                '-W015': true,
                "esversion": 6
              },
            build: {
              src: ['tmp/all.js']
            },
          },

       clean: {
        build: {
            src: ['tmp/*']
          },
       }

    });

  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('runwatch', [
    'watch'
   ]);

  grunt.registerTask('default', [
                                 'concat:build',
                                 'jshint:build',
                                 'babel:build',
                                 'uglify:build',
                                 'clean'
                                ]);

}

Trong đó ta đã sử dụng tác vụ watch ở đoạn mã:

    watch: {
        src: {
            files: ['src/*.js'],                //Giám sát các file src/*.js
            tasks: ['default'],                 //Thi hành tác vụ 'default'
          },
    },

Ta cũng đăng ký thêm task bởi grunt.registerTask đặt tên là runwatch, mục đích là khi gõ lệnh grunt runwatch sẽ chạy tác vụ watch

Giờ bắt đầu giám sát, hãy gõ lệnh:

grunt runwatch

Running "watch" task
Waiting...

Lập tức tác vụ watch chạy, nó cứ chờ như vậy, mỗi khi bạn sửa đổi nội dung .js thì lập tức nó kích hoạt chạy default (tương đương 5 tác vụ), chạy xong lại quay lại chờ giám sát ...

Như vậy việc của bạn giờ là chỉ việc sửa mã nguồn js, biên dịch thông báo lỗi ... grunt là tự động làm cho bạn mỗi khi thay đổi code.

Tải code ví dụ dự án trên về bằng git

git clone git@github.com:xuanthulabnet/grunt-example.git
cd grunt-example
git checkout vd3
npm install