Εγκαταστήστε το Γρύλισμα JS σε Windows – Φροντιστήριο

Home

Πριν από την εγκατάσταση Grunt.js θα πρέπει να έχετε node.js εγκατεστημένο. Για αυτό το σεμινάριο δεν έχω node.js v0.10.0 εγκατασταθεί.

Θα την εγκατάσταση Grunt.js v0.4.1. ΠΡΟΕΙΔΟΠΟΊΗΣΗ εάν έχετε Γρύλισμα.j 0.3.x ή λιγότερο θα πρέπει να απεγκαταστήσετε πρώτα.

Grunt είναι command line interface (CLI)

Για να πάρετε grunt.js εγκατασταθεί θα πρέπει πρώτα να εγκαταστήσετε το Γρύλισμα είναι command line interface (CLI) σε παγκόσμιο επίπεδο. Τρέχουσα έκδοση 1.0.6. Άνοιξε Γραμμή Εντολών των Windows και να βάλουμε την παρακάτω εντολή:

npm install grunt-cli -g

Αυτό θα θέσει το γρύλισμα εντολή στο σύστημά σας διαδρομή, ώστε να μπορεί να τρέξει από οποιοδήποτε directory.
Windows Συμβουλή – Ανοίξτε τη Γραμμή Εντολών από το Φάκελο (Δύο Τρόποι)

1. Τύπος cmd στην γραμμή διευθύνσεων και πατήστε enter
2. Κρατήστε πατημένο το Shift ενώ κάνετε Δεξί Κλικ σε ένα κενό χώρο στον φάκελο και επιλέξτε Άνοιγμα Παραθύρου Εντολών Εδώ.

Φάκελο και το Πακέτο Εγκατάστασης JSON

Τώρα θα πρέπει να εγκαταστήσετε Grunt.js. Με τη Γραμμή Εντολών των Windows περιηγηθείτε, να μας φάκελο του έργου. Μ ‘ αρέσει να βάζω όλη μου την οικοδόμηση αρχεία σε ένα φάκελο που ονομάζεται “_build”. Έτσι, για αυτό το παράδειγμα, η διαδρομή είναι “C:\Users\codebelt\Desktop\first-grunt-project\_build”.

Υπάρχουν μερικοί διαφορετικοί τρόποι για να πάρετε Grunt.js και άλλα plugins εγκατασταθεί, αλλά θα πρέπει να σας δείχνει ο ευκολότερος τρόπος (νομίζω). Πρέπει να δημιουργήσουμε ένα “πακέτο.json” και να το βάλετε σε μας “_build” φάκελο. Αντιγράψτε και το παρελθόν κώδικα παρακάτω και να βάλει στο “πακέτο.json”


{
"name": "Test-Project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.1.3"
}
}

Όταν η επόμενη εντολή παρακάτω είναι έτρεξαν θα εγκαταστήσει γρύλισμα v0.4.1 και το γρύλισμα plugin concat v0.1.3 στο “_build” φάκελο.

Εδώ είναι η εντολή:

npm install

Γρύλισμα Αρχείο Εγκατάστασης

Τώρα Grunt.js και το Concat plugin πρέπει να εγκατασταθεί. Τώρα θα πρέπει να προσθέσετε ένα Γρύλισμα αρχείο για να ρυθμίσετε τις παραμέτρους και την κατασκευή του έργου. Δημιουργήστε ένα “Gruntfile.js” το αρχείο μέσα στο “_build” φάκελο και επικόλληση στον κώδικα παρακάτω.


module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({

//Read the package.json (optional)
pkg: grunt.file.readJSON(‘package.json’),

// Metadata.
meta: {
basePath: ‘../’,
srcPath: ‘../src/’,
deployPath: ‘../deploy/’
},

banner: ‘/*! <%= pkg.name %> – v<%= pkg.version %> – ‘ +
‘<%= grunt.template.today(“yyyy-mm-dd”) %>\n’ +
‘* Copyright (c) <%= grunt.template.today(“yyyy”) %> ‘,

// Task configuration.
concat: {
options: {
stripBanners: true
},
dist: {
src: [‘<%= meta.srcPath %>scripts/fileone.js’, ‘<%= meta.srcPath %>scripts/filetwo.js’],
dest: ‘<%= meta.deployPath %>scripts/app.js’
}
}
});

// These plugins provide necessary tasks.
grunt.loadNpmTasks(‘grunt-contrib-concat’);

// Default task
grunt.registerTask(‘default’, [‘concat’]);

};

Αν κοιτάξετε θα δείτε ότι έχουν δημιουργήσει ένα fileone.js και filetwo.js αρχείο και τοποθέτησε μέσα στο ../src/scripts directory. Αυτό GruntJS σενάριο θα πάρει αυτά τα αρχεία και να εξαγάγετε στο ../ανάπτυξη/φάκελο δεσμών ενεργειών, όπως app.js. Είμαι με τη χρήση του <%= meta.srcPath %> ως σταθερό ή το βασικό μονοπάτι για να μου src φάκελο. Αυτό μου επιτρέπει να αλλάξετε το βασικό μονοπάτι σε μία θέση από το σκληρό κωδικοποιούνται σε όλο τον Gruntfile.

Τώρα πληκτρολογήστε “γρύλισμα” σε Γραμμή Εντολών των Windows και να παρακολουθήσετε το μαγικό να συμβεί.

grunt

Που θα εκτελέσετε την Προεπιλεγμένη έργο και να ενώσετε τα δύο js αρχεία σε ένα. Δοκιμάστε το, ελπίζω ότι αυτό λειτουργεί για σας. Θα πρέπει να δείτε το αποτέλεσμα στην Γραμμή Εντολών των Windows πω:

Running "concat:dist" (concat) task
File "../deploy/scripts/app.js" created.

Done, without errors.

Αρχικά στο http://www.codebelt.com/javascript/install-grunt-js-on-windows/