Aurelia - Bó
Trong chương này, bạn sẽ học cách sử dụng gói trong khung công tác Aurelia.
Bước 1 - Cài đặt điều kiện tiên quyết
Bạn có thể cài đặt aurelia-bundler bằng cách chạy lệnh sau trong command prompt.
C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev
Nếu bạn chưa cài đặt gulp, bạn có thể cài đặt nó bằng cách chạy mã này.
C:\Users\username\Desktop\aureliaApp>npm install gulp
Bạn cũng có thể cài đặt require-dir gói từ npm.
C:\Users\username\Desktop\aureliaApp>npm install require-dir
Bước 2 - Tạo thư mục và tệp
Đầu tiên, hãy tạo gulpfile.js tệp trong thư mục gốc của ứng dụng.
C:\Users\username\Desktop\aureliaApp>touch gulpfile.js
Bạn sẽ cần buildthư mục. Trong thư mục này, hãy thêm một thư mục khác có têntasks.
C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks
Bạn cần tạo bundle.js tập tin bên trong tasks thư mục.
C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js
Bước 3 - Gulp
Sử dụng gulpvới tư cách là người chạy nhiệm vụ. Bạn cần yêu cầu nó chạy mã từbuild\tasks\bundle.js.
gulpfile.js
require('require-dir')('build/tasks');
Bây giờ, hãy tạo tác vụ mà bạn cần. Tác vụ này sẽ đưa ứng dụng, tạodist/appbuild.js và dist/vendor-build.jscác tập tin. Sau khi quá trình gói hoàn tất,config.jstệp cũng sẽ được cập nhật. Bạn có thể bao gồm tất cả các tệp và plugin mà bạn muốn chèn và thu nhỏ.
bó.js
var gulp = require('gulp');
var bundle = require('aurelia-bundler').bundle;
var config = {
force: true,
baseURL: '.',
configPath: './config.js',
bundles: {
"dist/app-build": {
includes: [
'[*.js]',
'*.html!text',
'*.css!text',
],
options: {
inject: true,
minify: true
}
},
"dist/vendor-build": {
includes: [
'aurelia-bootstrapper',
'aurelia-fetch-client',
'aurelia-router',
'aurelia-animator-css',
],
options: {
inject: true,
minify: true
}
}
}
};
gulp.task('bundle', function() {
return bundle(config);
});
Các command prompt sẽ thông báo cho chúng tôi khi quá trình đóng gói hoàn tất.