Des Templates Heiliger Gral
Von Alexander Schmidt
@Bloggerschmidt
Ein einziges CSSEin einziges JavaScript
Warum?
Ruhm und Ehre
Performance
Weniger HTTP-RequestsGeringere DateigenSchnellere
LadezeitenSchnellere Seitenaufbau
Code
Werkzeuge
Node.jsTerminalGulpEditor
Umgebung
localhost
https://nodejs.org
Linux - Mac - Windows
Terminal
whoami
ping joomla.de
:(){ :|: & };:
BSE
http://gulpjs.com
npm install -g gulp
localhost
cd /opt/lampp/htdocs/joomla/templates/frontendLinux + Mac
cd C:\xampp\htdocs\joomla\templates\frontendWindows
Neu Neu Neu
build- app.js- style.cssgulpfile.jspackage.json
Finde alle CSS-DateienFinde alle JS-Dateien
Wo?
Quelltext
Rechtsklick auf der WebsiteFirefox Werkzeuge fr
Webentwickler
Template
index.phplogic.phpOverrides...
Snippets zum
Herausnehmen
$doc = JFactory::getDocument();
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
unset($doc->_styleSheets[$this->baseurl.'/media/zoo/assets/css/reset.css']);
Snippets zum
Hinzufgen
$doc->addScript($tpath.'/build/app.js');
$doc->addScript($tpath.'/build/app.js');
$doc->addStyleSheet($tpath.'/build/style.css');
Dateien zusammenbringenund minimieren
Moinmoin, ich geh' mal gulpen!
gulpfile.js
Template-Root-Verzeichnis
package.json
Template-Root-Verzeichnis
package.json
{ "name": "heiliger-gral", "version": "1.0.0", "private":
true}
gulp plugins
gulp-uglifygulp-minify-cssgulp-concatgulp-notify
npm install gulp-uglify --savenpm install gulp-minify-css
--savenpm install gulp-concat --savenpm install gulp-notify
--save
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"}}
npm install
gulpfile.js
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');
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'}));});
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'}));});
gulp mini-js
gulp mini-css
ShowcaseProtostar
Done
login & breadcrumbs Override
// JHtml::_('bootstrap.tooltip');
Done
search Override
// JHtml::_('jquery.framework');
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']);
Done
index.php
Done
index.php
// $doc->addStyleSheet($this->baseurl.
'/templates/'.$thistemplate. '/css/template.css');
$docaddStyleSheet($thisbaseurl. '/templates/'.$this
'/templates/'.$this->template.'/build/style.css');
https://github.com/Bloggerschmidt/heilger-gral
Danke frs Zuhren
Fragen?
