Download to read offline
![unset($doc->_scripts[$this-
>baseurl.'/media/jui/js/bootstrap.min.js']);](https://image.slidesharecdn.com/destemplatesheiligergral-150918054426-lva1-app6892/85/Des-Templates-Heiliger-Gral-34-320.jpg)
![unset($doc->_styleSheets[$this-
>baseurl.'/media/zoo/assets/css/reset.css']);](https://image.slidesharecdn.com/destemplatesheiligergral-150918054426-lva1-app6892/85/Des-Templates-Heiliger-Gral-35-320.jpg)
![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'}));
});](https://image.slidesharecdn.com/destemplatesheiligergral-150918054426-lva1-app6892/85/Des-Templates-Heiliger-Gral-52-320.jpg)
![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'}));
});](https://image.slidesharecdn.com/destemplatesheiligergral-150918054426-lva1-app6892/85/Des-Templates-Heiliger-Gral-53-320.jpg)
![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']);](https://image.slidesharecdn.com/destemplatesheiligergral-150918054426-lva1-app6892/85/Des-Templates-Heiliger-Gral-61-320.jpg)
Uploaded byAlexander Schmidt
Des Templates Heiliger Gral
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.
Des Templates Heiliger Gral
- 1. Des Templates HeiligerGral VonAlexander Schmidt @Bloggerschmidt
- 2. Ein einziges CSS Eineinziges JavaScript
- 3.
- 4.
- 5.
- 6. Weniger HTTP-Requests Geringere Dateigößen SchnellereLadezeiten Schnellere Seitenaufbau
- 7.
- 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.
- 11.
- 12.
- 13.
- 14. https://nodejs.org Linux - Mac- Windows
- 15.
- 17.
- 19.
- 21. :(){ :|: &};:
- 22.
- 23.
- 24. npm install -ggulp
- 25.
- 26. cd /opt/lampp/htdocs/joomla/templates/frontend Linux+ Mac cdC:xampphtdocsjoomlatemplatesfrontend Windows
- 27. Neu Neu Neu build -app.js - style.css gulpfile.js package.json
- 28. Finde alle CSS-Dateien Findealle JS-Dateien
- 29.
- 30. Quelltext Rechtsklick auf derWebsite Firefox Werkzeuge für Webentwickler
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. Moinmoin, ich geh'mal gulpen!
- 43.
- 44.
- 45.
- 46.
- 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.
- 50.
- 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.
- 55.
- 56.
- 59. Done login & breadcrumbsOverride // JHtml::_('bootstrap.tooltip');
- 60.
- 61. Done index.php // Add JavaScriptFrameworks // 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']);
- 62.
- 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');
- 70.
- 71.
- 72.
- 73.