Des Templates Heiliger Gral
•Als ODP, PDF herunterladen•
1 gefällt mir•467 views
Ein einziges CSS im <head> und ein einziges JavaScript vor </body>, das ist des Templates Heiliger Gral. Unter Joomla bekommst Du das hin mit Blank 4 und Joomla-API, mit Node.js und Gulp und im Vortrag erkärt Alexander Schmidt auch wie.
Empfohlen
Des Templates Heiliger Gral
- 1. Des Templates HeiligerGral Von Alexander Schmidt @Bloggerschmidt
- 2. Ein einziges CSS Ein einziges JavaScript
- 3. Warum?
- 5. Performance
- 6. Weniger HTTP-Requests Geringere Dateigößen Schnellere Ladezeiten Schnellere Seitenaufbau
- 7. Code
- 8. <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <script src="app.js" type="text/javascript"></script> </body> </html>
- 10. Werkzeuge
- 12. Umgebung
- 13. localhost
- 14. https://nodejs.org Linux - Mac - Windows
- 15. Terminal
- 17. whoami
- 19. ping joomla.de
- 21. :(){ :|: & };:
- 22. BÖSE
- 24. npm install -g gulp
- 25. localhost
- 26. cd /opt/lampp/htdocs/joomla/templates/frontend Linux+ Mac cd C:xampphtdocsjoomlatemplatesfrontend Windows
- 27. Neu Neu Neu build - app.js - style.css gulpfile.js package.json
- 28. Finde alle CSS-Dateien Finde alle JS-Dateien
- 29. Wo?
- 30. Quelltext Rechtsklick auf der Website Firefox Werkzeuge für Webentwickler
- 42. Moinmoin, ich geh' mal gulpen!
- 47. npm install gulp-uglify --save npm install gulp-minify-css --save npm install gulp-concat --save npm install gulp-notify --save
- 48. package.json { ... "devDependencies": { "gulp": "^3.8.11", "gulp-concat": "^2.2.0", "gulp-minify-css": "^1.0.0", "gulp-notify": "^2.2.0", "gulp-uglify": "^0.2.1" } }
- 49. npm install
- 50. gulpfile.js
- 51. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var minifyCSS = require('gulp-minify-css'); var concat = require('gulp-concat'); var notify = require('gulp-notify');
- 52. task mini-js gulp.task('mini-js', function () { return gulp.src([ 'js/bootstrap.min.js', 'js/script.js' ]) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')) .pipe(notify({message:'app.js erstellt'})); });
- 53. task mini-css gulp.task('mini-css', function () { gulp.src([ 'css/template.css' ]) .pipe(minifyCSS()) .pipe(concat('style.css')) .pipe(gulp.dest('build')) .pipe(notify({message:'style.css erstellt'})); });
- 54. gulp mini-js
- 55. gulp mini-css
- 59. Done login & breadcrumbs Override // JHtml::_('bootstrap.tooltip');
- 61. Done index.php // Add JavaScript Frameworks // JHtml::_('bootstrap.framework'); // $doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/template.js'); unset($doc->_scripts[$this->baseurl.'/media/jui/js/jquery.min.js']); unset($doc->_scripts[$this->baseurl.'/media/jui/js/jquery-noconflict.js']); unset($doc->_scripts[$this->baseurl.'/media/jui/js/jquery-migrate.min.js']); unset($doc->_scripts[$this->baseurl.'/media/system/js/caption.js']); unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']); unset($doc->_scripts[$this->baseurl.'/media/system/js/html5fallback.js']);
- 63. Done index.php // $doc->addStyleSheet($this->baseurl. '/templates/'. $this→template. '/css/template.css'); $doc→addStyleSheet($this→baseurl. '/templates/'.$this→ '/templates/'.$this->template.'/build/style.css');
- 72. Fragen?
- 73. </heiliger-gral>