Управление front-end проектом с помощью NPM

Недавно я задался вопросом поиска инструментария для разработки мобильных приложений на html/css. Из требований были: доступность, легковесность, простота настройки. Выбор пал на встроенный Node менеджер NPM. NPM содержит
инструментарий для базовых тасков типа install и запуска пользовательских скриптов. Также NPM не такой громоздкий, как Grunt и не требует адаптации модулей под себя, т.к. запускает модули с командной строки.

NPM, как средство разработчика

NPM умеет организовывать работу уже существующих модулей между собой. Да,
иногда решения не изящны и уступают Grunt, но каждой задаче должен быть соответствующий инструментарий. Т.к. NPM всего лишь запускает
модули через командную строку, то вам не нужно создавать или ждать не достающий
модуль, скорее всего он уже реализован.

Установка NPM

Приятное в NPM то, что он установлен у вас, если установлен Node.JS. Вам необходимо написать только файл конфигурации и вы
сможете выполнять базовые действия по сборке и тестированию ваших проектов.

Пример NPM конфига

{
  "name": "FrontendTemplate",
  "description": "",
  "author": "Sergei Z.",
  "scripts": {
  },
  "dependencies": {
  },
  "devDependencies": {
  }
}

В данном случае нам интересны блоки devDepencies и scripts. В devDepencies мы указываем какие модули будем использовать в разработке. В scripts создаем скрипты для сборки, тестирования проекта.

Давайте добавим пару полезных модулей.

{
  "name":" FrontendTemplate",
  "version": "0.0.1",
  "description": "",
 "repository": "",
  "author": "Sergei Z.",
  "dependencies": {
  },
  "devDependencies": {
    "supervisor": "*",
    "jshint": "~1.1.0",
    "less": "~1.3.3",
    "jade": "*",
    "uglify-js2": "*"
  }
}

Jade. Модуль шаблонизатора Jade, будем использовать чтобы генерировать наш html.
Uglify-JS2. Модуль для минимизации JS кода.
Less. Модуль для компиляции css из less файлов.
JSHint. Модуль для проверки JS кода на качество. Очень советую использовать.
Supervisor. Модуль для запуска JS приложений или команд при изменении файлов в каталоге.

Сохраняем это в package.json. Переходим в каталог и выполняем npm install. NPM загрузит модули в каталог node_modules.
Это только установка модулей, что касается их запуска, то нужно добавить секцию scripts в наш конфиг. Также
нам понадобятся UnixUtils на Windows.

{
  "name": "frontendTemplate",
  "version": "0.0.1",
  "description": "",
  "scripts": {  
    "less": "cat src/less/*.less > build/app.less.temp && lessc -x ./build/app.less.temp > ./build/css/app.css && rm -f build/app.less.temp",
    "uglify": "cat src/js/lib/*.js src/js/*.js > build/app.js.temp && uglifyjs2 -o build/js/app.min.js build/app.js.temp && rm -f build/app.js.temp",
    "jade": "jade --out build/ src/jade/index.jade",
    "build": "npm run less && npm run uglify && npm run jade",
    "start": "npm run build",
    "watch": "supervisor --watch src--extensions less,js,jade --exec npm -- run build"
  },
  "repository": "",
  "author": "Sergei Z.",
  "dependencies": {
  },
  "devDependencies": {
    "supervisor": "*",
    "jshint": "~1.1.0",
    "less": "~1.3.3",
    "jade": "*",
    "uglify-js2": "*"
  }
}

less скрипт компилирует less из папки src/less в css и кладет в папку build/css
uglify-js2 скрипт минимизирует весь js код из папки src, включая библиотеки из папки lib и кладет его в папку build/js
jade скрипт компилирует html из папки src/jade и кладет его в build
build Поочередно запускает скрипты less, uglify и jade
start Алиас для Build
watch запускает supervisor и смотрит за каталогом src и при изменении файлов с расширением less, js, jade запускает скрипт build

Запусить любой из скриптов можно командой npm run %commandname%. Например, npm run build. Например, npm run build для сборки проекта или npm run watch для наблюдение за каталогом и пересборки в случае изменения файлов.

NPM и TDDBDD

Я использую тесты для своих проектов, поэтому прикрутил также Mocha и PhantomJS для тестирования своего кода. Что из этого получилось посмотреть можно здесь

Интеграция с IDE

Т.к. NPM использует коммандную строку, то интеграция NPM с IDE становиться очень простой задачей. Например, расширение Shell Turtlestein для Sublime Text 2 позволяет запускать команды из IDE и смотреть output комманд прямо из IDE.

Заключение

Node.JS дает хороший инструментарий для frontend разработки и он справляется отлично со своей задачей в случае, если у вас маленький проект и вы можете менеджить его из командной строки, но он не достаточно гибок, если вам нужно advanced управление проектом. В этом случае лучше посмотреть на Grunt.

Автор: sagens

Источник