AngularJS
Zadania Grunt

Uruchom aplikację lokalnie

Poniższy przykład wymaga zainstalowania node.js i npm .
Pełny działający kod można rozwidlić z GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local

Zwykle jedną z pierwszych rzeczy, które chcesz zrobić przy opracowywaniu nowej aplikacji internetowej, jest uruchomienie jej lokalnie.

Poniżej znajdziesz pełny przykład osiągnięcia tego celu, używając gruntu (javascript task runner), npm (menedżer pakietów węzłów) i bower (jeszcze inny menedżer pakietów).

Oprócz rzeczywistych plików aplikacji musisz zainstalować kilka zależności innych firm za pomocą narzędzi wymienionych powyżej. W katalogu projektu, najlepiej root , potrzebujesz trzech (3) plików.

• package.json (zależności zarządzane przez npm)
• bower.json (zależności zarządzane przez bower)
• gruntfile.js (chrząknięcie)

Twój katalog projektu wygląda następująco:

pakiet.json

Będziemy instalacji sam grunt, matchdep aby nasze życie łatwiejszym pozwalając nam w zależności filtrów według nazwy, grunt-Express służy do uruchamiania serwera WWW za pośrednictwem wyraźnego grunt i grunt-Open, aby otworzyć adresy URL / plików z grunt zadania.

Dlatego te pakiety dotyczą „infrastruktury” i pomocników, na których będziemy budować naszą aplikację.

{
  "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 jest (a przynajmniej powinien) być o front-endie i użyjemy go do instalacji kątowej .

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

gruntfile.js

Wewnątrz gruntfile.js będziemy mieli rzeczywistą magię „działającej aplikacji lokalnie”, która otwiera naszą aplikację w nowym oknie przeglądarki, działającą na 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'
  ]);
};

Stosowanie

Aby uruchomić aplikację od zera, zapisz powyższe pliki w katalogu głównym projektu (wystarczy dowolny pusty folder). Następnie uruchom konsolę / wiersz poleceń i wpisz następujące polecenie, aby zainstalować wszystkie wymagane zależności.

npm install -g grunt-cli bower
npm install

Następnie uruchom aplikację za pomocą

grunt app

Pamiętaj, że tak, będziesz również potrzebować swoich rzeczywistych plików aplikacji.
Dla prawie minimalnego przykładu przejrzyj repozytorium GitHub wspomniane na początku tego przykładu.

Struktura nie jest taka inna. Jest tylko szablon index.html , kod kątowy w app.js i kilka stylów w app.css . Inne pliki są przeznaczone do konfiguracji Gita i edytora oraz kilka ogólnych rzeczy. Spróbuj!