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

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. Ανοίξτε το Τερματικό και να βάλουμε την παρακάτω εντολή:

npm install grunt-cli -g

Ενδέχεται να λάβετε ένα σφάλμα που λέει “σε Παρακαλώ δοκιμάστε να εκτελέσετε αυτήν την εντολή και πάλι ως root/Administrator.” Θα πρέπει να βάλετε την εντολή sudo πριν από την εντολή.

sudo npm install grunt-cli -g

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

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

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

Τώρα θα πρέπει να εγκαταστήσετε Grunt.js. Με Τερματικό περιηγηθείτε, να μας φάκελο του έργου. Μ ‘ αρέσει να βάζω όλη μου την οικοδόμηση αρχεία σε ένα φάκελο που ονομάζεται “_build”. Έτσι, για αυτό το παράδειγμα, η διαδρομή είναι “/Χρήστες/codebelt/επιφάνεια εργασίας/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” φάκελο.

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

sudo 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.

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

grunt

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

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

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