MAGA - PUG Roma giugno 2017
-
Upload
massimiliano-arione -
Category
Technology
-
view
514 -
download
0
Transcript of MAGA - PUG Roma giugno 2017
![Page 1: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/1.jpg)
meetup giugno 2017 #aperiTechLUISS Enlabs
![Page 2: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/2.jpg)
About: Massimiliano Arione
https://github.com/garak/
![Page 3: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/3.jpg)
full stack/backend/frontend
![Page 4: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/4.jpg)
assets
![Page 5: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/5.jpg)
deps/post process
![Page 6: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/6.jpg)
deps/post process
![Page 7: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/7.jpg)
deps/post process
![Page 8: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/8.jpg)
deps
![Page 9: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/9.jpg)
deps
![Page 10: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/10.jpg)
deps
![Page 11: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/11.jpg)
deps
![Page 12: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/12.jpg)
post process
![Page 13: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/13.jpg)
post process
![Page 14: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/14.jpg)
post process
![Page 15: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/15.jpg)
intermezzo...
...
![Page 16: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/16.jpg)
webpack
![Page 17: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/17.jpg)
webpack
![Page 18: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/18.jpg)
encore
![Page 19: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/19.jpg)
encore / setup
yarn add @symfony/webpack-encore --dev
# or
npm install @symfony/webpack-encore --save-dev
![Page 20: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/20.jpg)
encore / setup
yarn add @symfony/webpack-encore --dev
# or
npm install @symfony/webpack-encore --save-dev
packages.json
yarn.lock
package-lock.json
![Page 21: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/21.jpg)
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",
}
![Page 22: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/22.jpg)
encore / configurazionevar 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();
![Page 23: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/23.jpg)
encore / esecuzione
# in sviluppo
bin/encore dev
# in sviluppo, autoaggiornante
bin/encore dev --watch
# in produzione
bin/encore production
![Page 24: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/24.jpg)
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>
![Page 25: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/25.jpg)
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"
}
![Page 26: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/26.jpg)
encore / Symony
# app/config/config.yml
framework:
assets:
json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
![Page 27: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/27.jpg)
e poi...
● pre-processori (Sass, LESS)● PostCSS● autoprefix● react● babel● source map● CDN● webpack-dev-server
![Page 28: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/28.jpg)
bonus: deploynamespace :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'
![Page 29: MAGA - PUG Roma giugno 2017](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6506267f8b9a223a8b492b/html5/thumbnails/29.jpg)
that’s it!
questions?