MAGA - PUG Roma giugno 2017
•
0 likes•740 views
Make Assets Great Again! La mia presentazione sull'esperienza di uno sviluppatore backend nella gestione degli asset
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to MAGA - PUG Roma giugno 2017
Similar to MAGA - PUG Roma giugno 2017 (20)
More from Massimiliano Arione
More from Massimiliano Arione (20)
Recently uploaded
Recently uploaded (20)
MAGA - PUG Roma giugno 2017
- 1. meetup giugno 2017 #aperiTech LUISS Enlabs
- 4. assets
- 8. deps
- 9. deps
- 10. deps
- 11. deps
- 12. post process
- 13. post process
- 14. post process
- 16. webpack
- 17. webpack
- 18. encore
- 19. encore / setup yarn add @symfony/webpack-encore --dev # or npm install @symfony/webpack-encore --save-dev
- 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. 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. 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. encore / esecuzione # in sviluppo bin/encore dev # in sviluppo, autoaggiornante bin/encore dev --watch # in produzione bin/encore production
- 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. 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. encore / Symony # app/config/config.yml framework: assets: json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
- 27. e poi... ● pre-processori (Sass, LESS) ● PostCSS ● autoprefix ● react ● babel ● source map ● CDN ● webpack-dev-server
- 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'