symfony에서 npm과 함께 설치된 JavaScript 라이브러리 사용 방법

Question

npm을 사용하여 여러 개의 JS 라이브러리를 설치했으며 Symfony보기에서이를 사용하려고합니다.

<script src="{{ asset('path/to/js.js') }}"></script> 

노드 모듈을 웹 디렉토리에 설치해야합니까? 좋은 습관입니까?

그 목표를 달성하는 가장 좋은 방법은 무엇입니까?

Answer 1

Gulp을 사용하여 애셋을 축소 된 JS/CSS 파일로 컴파일하는 것이 좋습니다. 그것은 npm을 통해 설치 될 수 있고, 명령 행에서 실행될 수 있으며, npm 설치 파일을 꿀꺽 거리는 방법을 포함하여 좋은 문서가 존재합니다. 여기

는 NPM 파일 꿀꺽하는 방법을 볼 수 있도록 내 Gulpfile의 샘플입니다 :

var paths = { 
    admin: { 
     js: [ 
      'node_modules/jquery/dist/jquery.min.js', 
      'node_modules/semantic-ui-css/semantic.min.js', 
      'vendor/sylius/sylius/src/Sylius/Bundle/AdminBundle/Resources/private/js/**', 
      'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/js/**', 
      'vendor/sylius/sylius/src/Sylius/Bundle/ShippingBundle/Resources/public/js/**', 
      'vendor/sylius/sylius/src/Sylius/Bundle/PromotionBundle/Resources/public/js/sylius-promotion.js', 
      'vendor/sylius/sylius/src/Sylius/Bundle/UserBundle/Resources/public/js/sylius-user.js' 
     ], 
     sass: [ 
      'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/sass/**', 
     ], 
     css: [ 
      'node_modules/semantic-ui-css/semantic.min.css' 
     ], 
     img: [ 
      'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/img/**', 
     ] 
    }, 
    shop: { 
     js: [ 
      'node_modules/jquery/dist/jquery.min.js', 
      'node_modules/semantic-ui-css/semantic.min.js', 
      'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/js/**', 
      'vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/private/js/**' 
     ], 
     sass: [ 
      'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/sass/**', 
      'vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/private/scss/**', 
     ], 
     css: [ 
      'node_modules/semantic-ui-css/semantic.min.css', 
      'vendor/fortawesome/font-awesome/css/font-awesome.css' 
     ], 
     fonts: [ 
      'vendor/fortawesome/font-awesome/fonts/**.*' 
     ], 
     img: [ 
      'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/img/**', 
     ], 
     app: [ 
      'src/AppBundle/Resources/private/scss/**', 
     ], 
     appJs: [ 
      'src/AppBundle/Resources/private/js/**', 
     ], 
    } 
}; 

gulp.task('admin-js', function() { 
    return gulp.src(paths.admin.js) 
     .pipe(concat('app.js')) 
     .pipe(gulpif(env === 'prod', uglify)) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest(adminRootPath + 'js/')) 
    ; 
});