AngularJS
Grunt uppgifter

Kör applikationen lokalt

Följande exempel kräver att node.js är installerat och npm är tillgängligt.
Fullständig arbetskod kan gaffas från GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local

Vanligtvis är en av de första sakerna du vill göra när du utvecklar en ny webbapplikation att låta den köras lokalt.

Nedan hittar du ett fullständigt exempel på att uppnå just detta genom att använda grunt (javascript task-löpare), npm (node-pakethanteraren) och bower (ännu en pakethanterare).

Förutom dina faktiska applikationsfiler måste du installera några tredjepartsberoenden med verktyg som nämns ovan. I din projektkatalog, helst root , behöver du tre (3) filer.

• package.json (beroenden hanteras av npm)
• bower.json (beroenden hanteras av bower)
• gruntfile.js (grunt-uppgifter)

Så din projektkatalog ser ut så:

package.json

Vi kommer att installera grymta sig matchdep att göra våra liv enklare att tillåta oss att filter beroenden med namn, grunt-EXPRESS används för att starta uttryck webbserver via grymta och grunt öppna för att öppna webbadresser / filer från ett grunt uppgift.

Så dessa paket handlar om "infrastruktur" och hjälpare vi bygger vår applikation på.

{
  "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 handlar (eller åtminstone borde vara) om front-end och vi kommer att använda den för att installera vinkel .

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

gruntfile.js

Inuti gruntfile.js har vi den faktiska "körande applikationen lokalt" magi, som öppnar vår applikation i nytt webbläsarfönster, som körs på 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'
  ]);
};

Användande

Spara ovanstående filer i projektets rotkatalog (alla tomma mappar gör det) för att få din ansökan igång igen. Slå sedan upp konsolen / kommandoraden och skriv in följande för att installera alla nödvändiga beroenden.

npm install -g grunt-cli bower
npm install

Och kör sedan din applikation med

grunt app

Observera att ja, du behöver också dina faktiska applikationsfiler.
För nästan minimalt exempel bläddrar du i GitHub-lagret som nämns i början av detta exempel.

Strukturen är inte så annorlunda. Det finns bara index.html mall, app.js i app.js och få stilar i app.css . Andra filer är för Git och redaktörskonfiguration och några generiska grejer. Ge det ett försök!