Это краткое руководство поможет вам настроить новую структуру проекта с помощью generator-gulp-angular - генератора Yeoman для AngularJS С помощью Gulp - это сгенерирует структуру и некоторый демонстрационный код, из которого вы сможете построить свой проект.

Yeoman generator for AngularJS + Gulp.
Lets you quickly set up a project with:
• your favorite technologies
• web best practices
• guidelines powered by Google
Gulp provide fast workspace with quick feedback.

Зависимости (часть первая)

Для начала вам понадобится npm - менеджер пакетов для JavaScript - и Git, установленные в вашей системе.

В системе на основе Arch Linux, если у вас есть разрешение на использование sudo / root, запустите:

$ sudo pacman -S git npm

и он автоматически установит пакеты с их зависимостями (libuv, http-parser, nodejs, semver).

npm

Когда вы устанавливаете пакеты JavaScript с помощью npm, он устанавливает их по умолчанию локально в каталоге вашего проекта, но вы также можете установить их глобально (используя флаг -g), что полезно для приложений командной строки, таких как yo, gulp, bower.

Эмпирические правила, когда использовать глобально или локально:

  • Установить глобально, если пакет предоставляет инструменты командной строки
  • Установите локально, если вы используете пакет как часть своего приложения.
  • Установить глобально и локально, если применимы оба варианта использования

npm глобально без рута

Обратной стороной глобально установленных пакетов является то, что вы должны быть root (или использовать sudo), чтобы иметь возможность устанавливать их, если вы не измените местоположение, где npm хранит глобальные пакеты в вашей системе. Рекомендуется настроить npm для установки глобальных пакетов без прав суперпользователя.

Создайте новый каталог в своем домашнем каталоге, например, где будут храниться глобально установленные пакеты:

$ mkdir "${HOME}/.npm-packages"

Сообщите npm, где хранить глобально установленные пакеты, добавив

prefix=${HOME}/.npm-packages

в ваш файл ~ / .npmrc:

$ echo "prefix=${HOME}/.npm-packages" >> ~/.npmrc

Чтобы ваша оболочка обнаружила установленные двоичные файлы и man страницы, добавьте следующее в свой .bashrc или .zshrc , в зависимости от используемой оболочки:

NPM_PACKAGES="${HOME}/.npm-packages"
PATH="$NPM_PACKAGES/bin:$PATH"
# Unset manpath so we can inherit from /etc/manpath via the `manpath` command
unset MANPATH # delete if you already modified MANPATH elsewhere in your config
export MANPATH="$NPM_PACKAGES/share/man:$(manpath)"

Если вы используете Mac OS X, файл .bashrc может еще не существовать, и оболочка будет получать параметры своей среды из другого файла, такого как .profile или .bash_profile. Эти файлы также находятся в домашнем каталоге пользователя, поэтому в этом случае простое добавление к ним следующей строки укажет оболочке также загрузить файл .bashrc:

source ~/.bashrc

После редактирования файла .bashrc просто запустите ваш. bashrc скрипт, чтобы оболочка определила вновь настроенные переменные (или просто снова откройте окно терминала):

$ source ~/.bashrc

Зависимости (часть вторая)

Теперь, когда вы настроили npm, позволяя устанавливать пакеты глобально без root, вы, наконец, можете установить yo ( Инструмент командной строки для запуска генераторов Yeoman), gulp (система потоковой сборки) и bower (менеджер пакетов браузера):

$ npm install -g yo gulp bower

Если вы сейчас выполните which yo, он должен найти двоичный файл yo:

$ which yo
/home/you/.npm-packages/bin/yo

Установите generator-gulp-angular, один из генераторов Yeoman:

$ npm install -g generator-gulp-angular

и вы готовы наконец сгенерировать проект!

Создание проекта

Создайте новый каталог и перейдите в него:

$ mkdir my-project && cd $_

Запустите yo gulp-angular, и вам будет предложен ряд вопросов, которые помогут генератору создать файлы конфигурации npm и bower (package.json и bower.json ) с зависимостями проекта, которые затем будут установлены при запуске npm install и bower install соответственно.

$ yo gulp-angular

Генератор спросит вас о версии AngularJS, которую вы хотите использовать, какие модули Angular вы хотите установить, jQuery, библиотеки ресурсов, маршрутизаторы, фреймворки пользовательского интерфейса, препроцессоры CSS, препроцессоры JS и механизмы шаблонов HTML. Подробная информация о каждой технологии выходит за рамки этого руководства и потребует отдельной статьи.

? Which version of Angular do you want? (Use arrow keys)
❯ 1.5.x (stable)
  1.2.x (legacy)

? What Angular modules would you like to have? (ngRoute and ngResource will be addressed after) (Press <space> to select)
❯ ◉ angular-animate.js (enable animation features)
  ◉ angular-cookies.js (handle cookie management)
  ◉ angular-touch.js (for mobile development)
  ◉ angular-sanitize.js (to securely parse and manipulate HTML)
  ◉ angular-messages.js (enhanced support for displaying messages within templates)
  ◉ angular-aria.js (support for common ARIA attributes)

? Do you need jQuery or perhaps Zepto? (Use arrow keys)
❯ jQuery 2.x (new version, lighter, IE9+)
  jQuery 1.x (branch still supporting IE6, 7 and 8)
  ZeptoJS 1.1.x (jQuery compatible but very much lighter)
  None (Angular will use its own jqLite)

? Would you like to use a REST resource library? (Use arrow keys)
❯ ngResource, the official support for RESTful services
  Restangular, an alternative service to handle RESTful requests
  None, $http is enough!

? Would you like to use a router? (Use arrow keys)
❯ UI Router, flexible routing with nested views
  ngRoute, the official router
  Angular 2 new router which is compatible with Angular 1 (experimental)
  None

? Which UI framework do you want?
  Bootstrap, the most popular HTML, CSS, and JS framework
❯ Angular Material, the reference implementation of the Google’s Material Design specification
  Material Design Lite, add a Material Design look and feel to your websites.
  Foundation, “The most advanced responsive front-end framework in the world”
  None

? Which CSS preprocessor do you want? (Use arrow keys)
❯ Sass (Node), Node.js binding to libsass, the C version of the popular stylesheet preprocessor, Sass.
  Sass (Ruby), Original Syntactically Awesome StyleSheets (requires Ruby)
  Less, extends the CSS language, adding features that allow variables, mixins, functions and many other techniques.
  Stylus, supporting both an indented syntax and regular CSS style.
  None, only the good old CSS

? Which JS preprocessor do you want?
  None, I like to code in standard JavaScript.
❯ ES6 (Babel formerly 6to5), ECMAScript 6 compiled with Babel which requires no runtime.
  ES6 (Traceur), ECMAScript 6 compiled with the Traceur compiler from Google.
  CoffeeScript, “a little language that compiles into JavaScript”.
  TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.

? Which HTML template engine would you want? (Use arrow keys)
❯ None, I like to code in standard HTML.
  Jade (*.jade)
  Haml (*.haml)
  Handlebars (*.hbs)

Позвольте yo установить все необходимые зависимости для указанной конфигурации (запустятся npm install и bower install для вас). В конце вы увидите это сообщение:

It’s time to use Gulp tasks:
- `$ gulp` to build an optimized version of your application in folder dist
- `$ gulp serve` to start BrowserSync server on your source files with live reload
- `$ gulp serve:dist` to start BrowserSync server on your optimized application without live reload
- `$ gulp test` to run your unit tests with Karma
- `$ gulp test:auto` to run your unit tests with Karma in watch mode
- `$ gulp protractor` to launch your e2e tests with Protractor
- `$ gulp protractor:dist` to launch your e2e tests with Protractor on the dist files

Запуск проекта

Используйте gulp serve, чтобы сервер разработки работал и обслуживал ваш проект:

$ gulp serve
[12:39:53] Using gulpfile ~/my-project/gulpfile.js
[12:39:53] Starting ‘scripts’…
[12:39:53] Starting ‘styles’…
[12:39:54] gulp-inject 2 files into index.scss.
[12:39:54] Finished ‘styles’ after 765 ms
[12:39:57] Time: 3720ms
 Asset Size Chunks Chunk Names
index.module.js 14.4 kB 0 [emitted] main
[12:39:57] Finished ‘scripts’ after 4.53 s
[12:39:57] Starting ‘scripts:watch’…
[12:39:57] Starting ‘inject’…
[12:39:57] gulp-inject 1 files into index.html.
[12:39:57] gulp-inject 1 files into index.html.
[12:39:57] Finished ‘inject’ after 56 ms
[12:39:58] Time: 1027ms
 Asset Size Chunks Chunk Names
index.module.js 34.8 kB 0 [emitted] main
[12:39:58] Finished ‘scripts:watch’ after 1.04 s
[12:39:58] Starting ‘watch’…
[12:39:58] Finished ‘watch’ after 36 ms
[12:39:58] Starting ‘serve’…
[12:39:58] Finished ‘serve’ after 58 ms
[12:39:58] webpack is watching for changes
[BS] [BrowserSync SPA] Running…
[BS] Access URLs:
 — — — — — — — — — — — — — — — — — -
 Local: http://localhost:3000/
 External: http://10.0.2.15:3000/
 — — — — — — — — — — — — — — — — ---
 UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 — — — — — — — — — — — — — — — — — -
[BS] Serving files from: .tmp/serve
[BS] Serving files from: src

Он откроет для вас страницу (http: // localhost: 3000 /) в вашем браузере по умолчанию.

Файловая структура

Вновь созданный проект имеет следующую файловую структуру. Вы можете создавать новые компоненты в src / app / components (а затем импортировать их в index.modules.js) и устанавливать новые маршруты в index.route.js.

my-project
├── bower_components — bower local packages (by bower install)
│   ├── (17 directories)
│   └── …
├── bower.json — bower config. and browser dependencies
├── e2e
│   ├── main.po.js
│   └── main.spec.js
├── gulp — streaming build system partial configs.
│   ├── build.js
│   ├── conf.js
│   ├── e2e-tests.js
│   ├── inject.js
│   ├── scripts.js
│   ├── server.js
│   ├── styles.js
│   ├── unit-tests.js
│   └── watch.js
├── gulpfile.js — streaming build system main config.
├── karma.conf.js — (JavaScript test runner) config.
├── node_modules — npm local packages (by npm install)
│   ├── (795 directories)
│   └── …
├── package.json — npm config. and project dependencies
├── protractor.conf.js — (end-to-end testing for AngularJS) config.
└── src
    ├── app
    │   ├── components
    │   │   ├── githubContributor
    │   │   │   ├── githubContributor.service.js
    │   │   │   └── githubContributor.service.spec.js
    │   │   ├── malarkey
    │   │   │   ├── malarkey.directive.js
    │   │   │   ├── malarkey.directive.spec.js
    │   │   │   └── malarkey.scss
    │   │   ├── navbar
    │   │   │   ├── navbar.directive.js
    │   │   │   ├── navbar.directive.spec.js
    │   │   │   ├── navbar.html
    │   │   │   └── navbar.scss
    │   │   └── webDevTec
    │   │       ├── webDevTec.service.js
    │   │       └── webDevTec.service.spec.js
    │   ├── index.config.js
    │   ├── index.module.js
    │   ├── index.route.js
    │   ├── index.run.js
    │   ├── index.scss
    │   └── main
    │     ├── main.controller.js
    │     ├── main.controller.spec.js
    │     └── main.html
    ├── assets
    │   └── images
    │       ├── angular-material.png
    │       ├── angular.png
    │       ├── babel.png
    │       ├── browsersync.png
    │       ├── gulp.png
    │       ├── jasmine.png
    │       ├── karma.png
    │       ├── node-sass.png
    │       ├── protractor.png
    │       └── yeoman.png
    ├── favicon.ico
    └── index.html

Отсюда вы можете создать свой проект. Повеселись!