Biên dịch Javascript cho website với grunt tùy biến thư viện JS Bootstrap

Thực ra để ứng dựng grunt tự động hóa các tác vụ với dự án Javascript cho website đã được trình bày trong các ví dụ ở phần trước, ở đây sẽ tổng kết lại và áp dụng dự án mybootstrap, để sinh ra file .js cho dự án này (Xem lại dự án mybootstrap)

Tổng kết các tác vụ cần thiết làm với với JS

copy: {
  main: {
    expand: true,
    src: 'src/*',
    dest: 'dest/',
  },
},

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

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

npm install --save-dev @babel/core @babel/preset-env

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

uglify: {
    build: {
        files: {
            'build/file.min.js' : ['tmp/file.js']
        }
    },
},

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

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

Từ các tác vụ đơn lẻ trên, kết hợp lại sẽ chuỗi tác vụ phức tạp làm việc với JS

Áp dụng với thư viện Boostrap

Trở lại dự án mybootstrap, đã xong phần CSS, giờ là lúc tùy biến với JS

Các thành phần JS phục vụ cho Bootstrap ở thư mục node_modules/bootstrap/js/src/, bạn mở thư mục đó ra thấy có các thành phần JS như alert.js, button.js, collapse.js ... nó phục vụ cho các chức năng của JS. Mặc định Boostrap cung cấp bootstrap.min.js chính là sự tổng hợp của những thành phần này

Giờ bạn muốn tự tổng hợp căn cứ theo thành phần nào bạn cần, đồng thời cho thêm những thành phần riêng của bạn, để build thành file build/mybootstrap.min.js của riêng bạn, dùng cho bootstrap.min.css ở phần trước!

Đầu tiên bạn tạo ra thư mục src/js/ trong đó lưu các file JS riêng của bạn. Ví dụ bạn tao 1 file src/js/hello.js có nội dung:

function helloworld()
{
    console.log("Xin chào XUANTHULAB");
}

Các bước thực hiện

Bước 1 đảm bảo cài đặt tất cả các thư viện cần thiết

File package.json

{
    "name": "mybootstrap",
    "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",
        "grunt-sass": "~3.0.2",
        "node-sass": "~4.10.0",
        "bootstrap": "4.1.3",
        "grunt-contrib-cssmin": "~3.0.0",
        "grunt-postcss": "~0.9.0",
        "postcss": "~7.0.6",
        "pixrem": "~4.0.1",
        "autoprefixer": "~9.3.1"
    }
}

Có file này rồi, gõ lệnh npm install để cài các package

Bước 2 Kiểm tra cú pháp Javascript của bạn có đúng không

Tác vụ jshint sẽ kiểm tra cú pháp JS, có thiết lập để chấp nhận ES6, nếu code lỗi nó sẽ thông báo

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

Bước 3 Nối các file JS lại với nhau

Ở bước này, cần dùng file JS nào của bootstrap, cần cho thêm file riêng nào vào thì chỉ ra trong tác vụ concat

concat: {
  options: {
    // Custom function to remove all export and import statements
    process: function (src) {
      return src.replace(/^(export|import).*/gm, '');
    }
  },
  bootstrap: {
    src: [
      //Gộp các JS của bootstrap, không cần cái nào thì comment bỏ đi

      'node_modules/bootstrap/js/src/util.js',
      'node_modules/bootstrap/js/src/alert.js',
      'node_modules/bootstrap/js/src/button.js',
      'node_modules/bootstrap/js/src/carousel.js',
      'node_modules/bootstrap/js/src/collapse.js',
      'node_modules/bootstrap/js/src/dropdown.js',
      'node_modules/bootstrap/js/src/modal.js',
      'node_modules/bootstrap/js/src/scrollspy.js',
      'node_modules/bootstrap/js/src/tab.js',
      'node_modules/bootstrap/js/src/tooltip.js',
      'node_modules/bootstrap/js/src/popover.js',

      //Gộp JS riêng trong thư mục
      'src/js/*.js'


    ],
    dest: 'tmp/js/all.js'
  }
},

Bước 4 Chuyển code JS tương thích ngược với phiên bản cũ

Tác vụ babel sẽ chuyển mã gốc tmp/js/all.js tương thích với các phiên bản cũ, kết quả lưu tại tmp/js/mybootstrap.js

babel: {
        options: {
            presets: ['@babel/preset-env']
          },

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

Bước 5 Nén file JS

Tác vụ uglify nén file JS tmp/js/mybootstrap.js, kết quả lưu tại build/mybootstrap.min.js, đây là file sản phẩm cuối cùng

uglify: {
    build: {
        files: {
            'build/mybootstrap.min.js' : ['tmp/js/mybootstrap.js']
        }
    },
},

Bước 6 Xóa các file tạm trong tmp

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

Bước 7 Tổng hợp tất cả các tác vụ

Các tác vụ trên, tổng hợp lại thành một tác vụ tên buildjs

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

Bước 8 Giám sát file JS

Tạo ra tác vụ watch, để mỗi khi file nguồn JS của bạn thay đổi thì sẽ chạy lại buildjs

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

Để bắt đầu giám sát gõ lệnh: grunt runwatch

Đến đây đã hoàn thành cấu hình dự án, bạn chỉ việc ngồi code các file JS nguồn của mình trong src/js/, mọi thay đổi sẽ tự động build ra mybootstrap.min.js

TỔNG KẾT LẠI

Cùng với bài viết GRUNT SASS BOOTSTRAP, đến đây bạn đã bổ sung thêm tùy biến JS, bạn đã có một dự án tùy biến Bootstrap hoàn chỉnh của riêng mình. Sau khi chạy grunt runwatch, nếu code nguồn sass thay đổi sẽ tự động build ra css, nếu nguồn js thay đổi sẽ tự động build ra mybootstrap.min.js

Mã nguồn tổng hợp ví dụ trên, bạn có thể tải về bằng git

# git clone git@github.com:xuanthulabnet/mybootstrap.git
# git cd mybootstrap
# git checkout master
# npm install