AngularJS
Compiti grunt

Esegui l'applicazione localmente

L'esempio seguente richiede che node.js sia installato e che npm sia disponibile.
Il codice di lavoro completo può essere biforcato da GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local

Di solito una delle prime cose che vuoi fare quando si sviluppa una nuova applicazione web è farla girare localmente.

Qui di seguito troverete un esempio completo che raggiunge proprio questo, usando grunt (javascript task runner), npm (node ​​package manager) e bower (ancora un altro gestore di pacchetti).

Oltre ai tuoi file di applicazione effettivi dovrai installare alcune dipendenze di terze parti utilizzando gli strumenti sopra menzionati. Nella directory del progetto, preferibilmente root , avrai bisogno di tre (3) file.

• package.json (dipendenze gestite da npm)
• bower.json (dipendenze gestite da bower)
• gruntfile.js (compiti grunt)

Quindi la directory del tuo progetto è così:

package.json

Installeremo il grunt stesso, matchdep per semplificarci la vita permettendoci di filtrare le dipendenze per nome, grunt-express usato per avviare express web server via grunt e grunt-open per aprire url / file da un grunt task.

Quindi questi pacchetti sono tutti su "infrastruttura" e aiutanti su cui creeremo la nostra applicazione.

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "grunt-express": "~1.0.0-beta2",
    "grunt-open": "~0.2.1"
  },
  "scripts": {
    "postinstall": "bower install"
  }
}

bower.json

Bower è (o almeno dovrebbe essere) tutto sul front-end e lo useremo per installare angolare .

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {
    "angular": "~1.3.x"
  },
  "devDependencies": {}
}

gruntfile.js

All'interno di gruntfile.js avremo l'effettiva "applicazione in esecuzione" magica, che apre la nostra applicazione in una nuova finestra del browser, in esecuzione su http: // localhost: 9000 /

'use strict';

// see http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/

module.exports = function(grunt) {
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
  grunt.initConfig({
    express: {
      all: {
        options: {
          port: 9000,
          hostname: 'localhost',
          bases: [__dirname]
        }
      }
    },
 
    open: {
      all: {
        path: 'http://localhost:<%= express.all.options.port%>'
      }
    }
  });
 
  grunt.registerTask('app', [
    'express',
    'open',
    'express-keepalive'
  ]);
};

uso

Per far funzionare la tua applicazione da zero, salva i file sopra nella directory principale del tuo progetto (qualsiasi cartella vuota lo farà). Quindi avviare la console / riga di comando e digitare quanto segue per installare tutte le dipendenze richieste.

npm install -g grunt-cli bower
npm install

E poi esegui la tua applicazione usando

grunt app

Nota che sì, avrai bisogno anche dei tuoi file di applicazione reali.
Per un esempio quasi minimale, consulta il repository GitHub menzionato all'inizio di questo esempio.

La struttura non è così diversa. C'è solo il template index.html , il codice angolare in app.js e alcuni stili in app.css . Altri file sono per la configurazione Git e editor e alcune cose generiche. Provaci!