AngularJS
Tâches Grunt

Exécutez l'application localement

L'exemple suivant requiert l'installation de node.js et la disponibilité de npm .
Un code de travail complet peut être généré à partir de GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local

Généralement, l'une des premières choses à faire lors du développement d'une nouvelle application Web consiste à le faire fonctionner localement.

Vous trouverez ci-dessous un exemple complet de réalisation, en utilisant grunt (coureur de tâches javascript), npm ( gestionnaire de paquets de nœuds) et bower (encore un autre gestionnaire de paquets).

Outre vos fichiers d'application réels, vous devrez installer quelques dépendances tierces à l'aide des outils mentionnés ci-dessus. Dans votre répertoire de projet, de préférence root , vous aurez besoin de trois (3) fichiers.

• package.json (dépendances gérées par npm)
• bower.json (dépendances gérées par bower)
• gruntfile.js (tâches grognantes)

Ainsi, votre répertoire de projet ressemble à ceci:

package.json

Nous allons installer grunt lui-même, matchdep pour rendre notre vie plus facile nous permettant de filtrer les dépendances par nom, grunt-express utilisé pour démarrer express web server via grunt et grunt-open pour ouvrir des URL / fichiers à partir d'une tâche grunt.

Donc, ces paquets sont tout au sujet de "infrastructure" et des aides sur lesquelles nous allons construire notre application.

{
  "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 est (ou du moins devrait être) tout au sujet du frontal et nous l’utiliserons pour installer angular .

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

gruntfile.js

A l'intérieur de gruntfile.js, nous aurons la magie "application en cours d'exécution", qui ouvre notre application dans une nouvelle fenêtre du navigateur, exécutée sur 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'
  ]);
};

Usage

Pour faire fonctionner votre application à partir de zéro, enregistrez les fichiers ci-dessus dans le répertoire racine de votre projet (tout dossier vide fera l'affaire). Ensuite, lancez console / ligne de commande et tapez ce qui suit pour installer toutes les dépendances requises.

npm install -g grunt-cli bower
npm install

Et puis exécutez votre application en utilisant

grunt app

Notez que oui, vous aurez également besoin de vos fichiers d'application réels.
Pour un exemple presque minimal, parcourez le référentiel GitHub mentionné au début de cet exemple.

La structure n'est pas si différente. Il y a juste un template index.html , un code angulaire dans app.js et quelques styles dans app.css . D'autres fichiers sont destinés à la configuration de Git et de l'éditeur, ainsi qu'à des éléments génériques. Essaie!