Aurelia-번들링

이 장에서는 Aurelia 프레임 워크에서 번들링을 사용하는 방법을 배웁니다.

1 단계-필수 구성 요소 설치

설치할 수 있습니다 aurelia-bundler 다음 명령을 실행하여 command prompt.

C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev

gulp를 설치하지 않은 경우이 코드를 실행하여 설치할 수 있습니다.

C:\Users\username\Desktop\aureliaApp>npm install gulp

당신은 또한 설치할 수 있습니다 require-dir 패키지 npm.

C:\Users\username\Desktop\aureliaApp>npm install require-dir

2 단계-폴더 및 파일 만들기

먼저 gulpfile.js 앱 루트 디렉토리의 파일.

C:\Users\username\Desktop\aureliaApp>touch gulpfile.js

당신은 필요합니다 build폴더. 이 디렉토리에서 다른 폴더를 추가하십시오.tasks.

C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks

당신은 만들어야합니다 bundle.js 내부 파일 tasks 폴더.

C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js

3 단계-Gulp

사용하다 gulp태스크 러너로. 코드를 실행하도록 지시해야합니다.build\tasks\bundle.js.

gulpfile.js

require('require-dir')('build/tasks');

이제 필요한 작업을 만듭니다. 이 작업은 앱을 가져 와서dist/appbuild.js 과 dist/vendor-build.js파일. 번들링 프로세스가 완료되면config.js파일도 업데이트됩니다. 삽입하고 축소하려는 모든 파일과 플러그인을 포함 할 수 있습니다.

bundle.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);
});

그만큼 command prompt 번들링이 완료되면 알려드립니다.