Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

MAGA - PUG Roma giugno 2017

609 Aufrufe

Veröffentlicht am

Make Assets Great Again! La mia presentazione sull'esperienza di uno sviluppatore backend nella gestione degli asset

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

MAGA - PUG Roma giugno 2017

  1. 1. meetup giugno 2017 #aperiTech LUISS Enlabs
  2. 2. About: Massimiliano Arione https://github.com/garak/
  3. 3. full stack/backend/frontend
  4. 4. assets
  5. 5. deps/post process
  6. 6. deps/post process
  7. 7. deps/post process
  8. 8. deps
  9. 9. deps
  10. 10. deps
  11. 11. deps
  12. 12. post process
  13. 13. post process
  14. 14. post process
  15. 15. intermezzo... ...
  16. 16. webpack
  17. 17. webpack
  18. 18. encore
  19. 19. encore / setup yarn add @symfony/webpack-encore --dev # or npm install @symfony/webpack-encore --save-dev
  20. 20. encore / setup yarn add @symfony/webpack-encore --dev # or npm install @symfony/webpack-encore --save-dev packages.json yarn.lock package-lock.json
  21. 21. encore / setup { "name": "pug-roma", "dependencies": { "bootstrap": "^3.3.7", "jquery": "^3.2.1" }, "devDependencies": { "@symfony/webpack-encore": "^0.7.2" }, "scripts": { "postinstall": "cd bin && ln -s ../node_modules/.bin/encore" }, "author": "Massimiliano Arione", }
  22. 22. encore / configurazione var Encore = require('@symfony/webpack-encore'); Encore .setOutputPath('web/build/') .setPublicPath('/build') .cleanupOutputBeforeBuild() .addEntry('js/app', './app/Resources/assets/js/app.js') .addEntry('js/admin', './app/Resources/assets/js/admin.js') .addStyleEntry('css/app', './app/Resources/assets/css/app.css') .addStyleEntry('css/admin', './app/Resources/assets/css/admin.css') //.enableSassLoader() .autoProvidejQuery() .enableSourceMaps(!Encore.isProduction()) .enableVersioning() ; module.exports = Encore.getWebpackConfig();
  23. 23. encore / esecuzione # in sviluppo bin/encore dev # in sviluppo, autoaggiornante bin/encore dev --watch # in produzione bin/encore production
  24. 24. encore / Symony {# base.html.twig #} <!DOCTYPE html> <html> <head> <!-- ... --> <link rel="stylesheet" href="{{ asset('build/css/app.css') }}"> </head> <body> <!-- ... --> <script src="{{ asset('build/js/app.js') }}"></script> </body> </html>
  25. 25. encore / Symony { "build/css/admin.css": "/build/css/admin.9855c758153d2e6523954bad53460601.css", "build/css/app.css": "/build/css/app.45a6223860dd81251b1c23b02e040edc.css", "build/js/admin.js": "/build/js/admin.cd0341a19976140422ac.js", "build/js/app.js": "/build/js/app.94a46683ef7f7b4f56b6.js" }
  26. 26. encore / Symony # app/config/config.yml framework: assets: json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
  27. 27. e poi... ● pre-processori (Sass, LESS) ● PostCSS ● autoprefix ● react ● babel ● source map ● CDN ● webpack-dev-server
  28. 28. bonus: deploy namespace :assets do desc 'Run the precompile task locally' task :precompile do capifony_pretty_print "--> Precompile assets" run_locally('./bin/encore production') run_locally('tar cvfz assets.tgz web/build/') run_locally('mv assets.tgz web/build/') capifony_puts_ok end desc 'Upload precompiled assets' task :upload_assets do capifony_pretty_print "--> Install remote assets" upload "web/build/assets.tgz", "#{release_path}/assets.tgz" run "cd #{release_path}; tar xvfz assets.tgz; rm assets.tgz" capifony_puts_ok end end before 'deploy:update_code', 'assets:precompile' after 'deploy:create_symlink', 'assets:upload_assets'
  29. 29. that’s it! questions?

×