Man kann mit verschiedenen Tools für sein Projekt ein sogenannten Scaffold (Gerüst) erstellen, das sind Dateien die Du immer wieder bei jedem Projekt benötigst. Aber sie jedesmal neu erstellen musst. Damit das nicht so ist gibt es meistens eine Hilfe vom Framework bevor Du beginnst etwas zu installieren, deine Templates zu laden.
Ich habe hier ein Gerüst erstellt, welches genau diese Struktur erstellt:
Gruntfile.js
package.json
public/index.html
src/js/index.js
less/style.less
sass/style.scssDas sind alle Dateien die erstellt werden. Du kannst bei der Abfrage entscheiden ob Du LESS oder SASS nutzt in dem Du bei einem mit n für no antwortest. Man kann aber auch beide nutzen.
Vorlagen Ort festlegen und Runterladen
Um das Template jedoch zu nutzen müssen wir zuerst grunt-init installieren und dies tun wir Global.
npm install -g grunt-initWenn wir grunt-init installiert haben, haben wir ein Teil von Grunt im Einsatz. Grunt besteht aus 3 teilen grunt, grunt-cli und grunt-init. Wir benötigen jedoch als erstes nur grunt-init und grunt schreiben wir automatisch in die package.json später. Um ein Template zu nutzen müssen wir erst eins haben, wie bereits erwähnt habe ich eins programmiert und den könnt Ihr hier Klonen.
Also entweder ladest Du das Template in den dafür vorgesehenen Ordner ~/.grunt-init/ oder Du nimmst dir ein Ordner den Du willst. Voraussetzung dafür ist das Du Git installiert hast egal ob Lokal oder Global.
Git
Git Install
Wenn Du Git installiert hast können wir klonen.
git clone https://github.com/prod3v3loper/grunt-scaffold-template.git ~/.grunt-init/grunt-scaffold-templategit clone https://github.com/prod3v3loper/grunt-scaffold-template.git /path/what/you/want/grunt-scaffold-templateWenn wir diesen Teil geschafft haben, dann ist unser Template nun in einem Ordner auf unserem Rechner Lokal.
Auf Vorlagen zugreifen und nutzen
Wir haben jetzt grunt-init installiert und Git. Wir haben die Vorlage heruntergeladen und können sie nun auch ansprechen, dies tun wir mit folgender Zeile. Hier ist nur wichtig zu beachten wo Du deine Vorlage hingezogen hast, also wähle den Pfad und Enter. Mit dieser Zeile sollte das Scaffolding beginnen und es erscheint in deiner Konsole die Aufforderung.
grunt-init ~/.grunt-init/grunt-scaffold-templategrunt-init /path/what/you/want/grunt-scaffold-templateprod3v3loper:Gruntjs tarim$ cd /Users/username/Sites/PHP-Gruntjs
prod3v3loper:Gruntjs tarim$ grunt-init /Users/username/Sites/external/grunt-scaffold-template/
Running "init:/Users/username/Sites/external/grunt-scaffold-template/" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.
"grunt-scaffold-template" template notes:
This is a Scaffolding and we create in next steps our files.The Gruntfile.js
will be automatically integrated here, then a package.json if you wantand create
a HTML, CSS (SASS or LESS) and a JavaScript file, if you want.
Please answer the following:
[?] Will you handle LESS files? (Y/n)
[?] Will you handle SASS files? (Y/n) n
[?] Will you autoprefix css files? (Y/n)
[?] Will you minifiy JavaScript files? (Y/n)
[?] Do you need to make any changes to the above before continuing? (y/N)
Writing Gruntfile.js...OK
Writing public/index.html...OK
Writing src/js/index.js...OK
Writing package.json...OK
Initialized from template "grunt-scaffold-template".
Done, without errors.Grunt einsatzbereit machen
So wenn Du alle schritte oben ausgeführt hast, dann können wir nun unsere Dependencies installieren die automatisch in die package.json geschrieben wurde.
npm installWenn wir ppm install ausgeführt haben, kann es losgehen, nun können wir alle unsere Tasks ausführen die in unserer Gruntfile.js stehen zum Beispiel.
grunt build:releasegrunt build:devSo nun hast Du es geschafft, ich werde in diesem Tutorial auf die Erstellung der Vorlage näher eingehen, folgt in kürze.
Grunt Scaffold Template