Symfonyでnpmと一緒にインストールされたJavaScriptライブラリの使用

Question

npmで複数のJSライブラリをインストールしましたが、symfonyのビューでそれらを使用しようとしています。

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

Webディレクトリにノードモジュールをインストールする必要がありますか。それは良い練習ですか？

これを達成する最も良い方法は何ですか？

Answer 1

Gulpを使用して、アセットを縮小されたJS/CSSファイルにコンパイルすることをお勧めします。それはnpmを介してインストールすることができ、コマンドラインから実行することができ、npmインストールされたファイルをどのようにgulpするかを含む良いドキュメントが存在します。あなたが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/')) 
    ; 
});