MAGA - PUG Roma giugno 2017
29
meetup giugno 2017 #aperiTech LUISS Enlabs
-
Upload
massimiliano-arione -
Category
Technology
-
view
514 -
download
0
Transcript of MAGA - PUG Roma giugno 2017
meetup giugno 2017 #aperiTechLUISS Enlabs
About: Massimiliano Arione
https://github.com/garak/
full stack/backend/frontend
assets
deps/post process
deps/post process
deps/post process
deps
deps
deps
deps
post process
post process
post process
intermezzo...
...
webpack
webpack
encore
encore / setup
yarn add @symfony/webpack-encore --dev
# or
npm install @symfony/webpack-encore --save-dev
encore / setup
yarn add @symfony/webpack-encore --dev
# or
npm install @symfony/webpack-encore --save-dev
packages.json
yarn.lock
package-lock.json
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",
}
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();
encore / esecuzione
# in sviluppo
bin/encore dev
# in sviluppo, autoaggiornante
bin/encore dev --watch
# in produzione
bin/encore production
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>
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"
}
encore / Symony
# app/config/config.yml
framework:
assets:
json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
e poi...
● pre-processori (Sass, LESS)● PostCSS● autoprefix● react● babel● source map● CDN● webpack-dev-server
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'
that’s it!
questions?
