Υποενότητα 5.3: Κατασκευή site

Εισαγωγή

Σε αυτήν την υποενότητα, θα μάθετε να δημιουργείτε ένα φάκελο διανομής - distribution folder που να περιέχει τα αρχεία που μπορούν να αναπτυχθούν σε ένα διακομιστή ιστού ο οποίος φιλοξενεί το έργο σας. Αυτός ο φάκελος διανομής θα κατασκευαστεί από τα αρχεία του έργου σας χρησιμοποιώντας διάφορα πακέτα και δέσμες ενεργειών NPM. Θα μάθουμε να:

• Καθαρίζουμε - Clean out ένα φάκελο χρησιμοποιώντας το clean NPM module.
• Copy - Κάνουμε αντιγραφή αρχείων από ένα φάκελο σε άλλο
• Προετοιμάζουμε ένα ελαχιστοποιημένο - minified και συναρμολογημένο - concatenated αρχείο CSS από όλα τα αρχεία CSS που χρησιμοποιούνται στο έργο 
• Προετοιμάζουμε ένα αναδιαμορφωμένο - uglified και συναρμολογημένο - concatenated αρχείο που περιέχει όλο τον κώδικα JS που χρησιμοποιήθηκε στο έργο 

Δείτε περισσότερα: How to Use npm as a Build Tool

Ανοίξτε στο τερματικό το φάκελο leChocolat για να εκτελέσετε τις επόμενες εντολές.

Καθαρισμός του Distribution Folder

Εγκαταστήστε το rimraf npm module πληκτρολογώντας τα ακόλουθαg στην prompt του terminal:

npm install --save-dev rimraf

Στη συνέχεια, ορίστε στο package.json το ακόλουθο  script:

"clean": "rimraf dist",

Αντιγραφή Font awesome

Το έργο σας χρησιμοποιεί Font awesome γραμματοσειρές. Αυτά πρέπει να αντιγραφούν στον φάκελο διανομής. Εγκαθιστούμε το copyfiles NPM module globally πληκτρολογώντας τα εξής στην prompt του terminal:

npm -g install copyfiles

<!--Θυμηθείτε να χρησιμοποιήσετε  sudo σε Mac and Linux, αν χρειαστεί.-->

Στη συνέχεια, ορίστε στο package.json το ακόλουθο  script:

"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",

Compressing και Minifying στις εικόνες

Θα χρησιμοποιήσουμε το  imagemin-cli NPM module για να μας βοηθήσει να συμπιέζουμε τις εικόνες μας για να μειώσουμε το μέγεθος των εικόνων που χρησιμοποιούνται στο έργο μας. Εγκαθιστούμε το  imagemin-cli module globally πληκτρολογώντας τα εξής στην prompt του terminal:

npm -g install imagemin-cli

<!--Θυμηθείτε να χρησιμοποιήσετε  sudo σε Mac and Linux, αν χρειαστεί.-->

Αν έχετε σφάλματα στην εγκατάσταση σε Linux, εκτελέστε την επόμενη εντολή

sudo npm install -g imagemin-cli --unsafe-perm=true --allow-root

Στη συνέχεια, ορίστε στο package.json το ακόλουθο  script:

"imagemin": "imagemin images/* -o dist/images",

0

Προετοιμασία του Distribution Folder I

Ανοίξτε το .gitignore και ενημερώστε την ως εξής. Δεν θέλουμε να ελεγχθεί ο φάκελος dist στο git repository.

node_modules
dist

Προετοιμασία του Distribution Folder II

Εγκαταστήστε usemin-cli, cssmin, uglifyjs και htmlmin NPM packages ως εξής:

npm install --save-dev usemin-cli cssmin uglifyjs htmlmin

Στη συνέχεια, ορίστε στο package.json το ακόλουθο  script:

"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin menu.html -d dist --htmlmin -o dist/menu.html && usemin index.html -d dist --htmlmin -o dist/index.html", 

 "build": "npm run clean && npm run imagemin && npm run copyfonts && npm run usemin"

Προετοιμασία του Distribution Folder III

Ανοίξτε το index.html και περιβάλλετε τον κώδικα συνδέσμων CSS ως εξής:

<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link href="css/styles.css" rel="stylesheet">
<!-- endbuild -->

Κάντε το ίδιο στα aboutus.html, menu.html and contactus.html

Προετοιμασία του Distribution Folder IV

Ανοίξτε το index.html και περιβάλλετε τον κώδικα συνδέσμων JavaScript ως εξής:

<!-- build:js js/main.js -->
 <script src="node_modules/jquery/dist/jquery.min.js"></script>
 <script src="node_modules/tether/dist/js/tether.min.js"></script>
 <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="js/scripts.js"></script>
 <!-- endbuild -->

Κάντε το ίδιο στα aboutus.html, menu.html and contactus.html

Δημιουργία του distribution folder

Για να δημιουργήσετε το φάκελο διανομής, μπορείτε να πληκτρολογήσετε τα εξής στη γραμμή εντολών:

npm run build

Αυτό θα δημιουργήσει το φάκελο dist που περιέχει τα αρχεία που είναι μια αυτόνομη έκδοση του έργου σας. Τώρα μπορείτε να αντιγράψετε τα περιεχόμενα αυτού του φακέλου σε ένα διακομιστή ιστού που φιλοξενεί τον ιστότοπό σας.

Do a git commit

Αφού βεβαιωθείτε ότι ο φάκελος dist είναι κατασκευασμένος σωστά, κάντε μια git commit με μήνυμα "YourName's final Bootstrap project"