Недавно я задумался о поиске инструментов для разработки мобильных приложений с использованием html/css. Требования были: доступность, легкость, простота настройки.
Выбор пал на встроенный Node-менеджер NPM. НПМ содержит инструменты для основных задач, таких как установка и запуск пользовательских сценариев.
Также NPM не такой громоздкий, как Grunt, и не требует настройки модулей, т. к.
запускает модули из командной строки.
NPM как инструмент разработчика NPM может организовать работу существующих модулей между собой.
Да, иногда решения не изящны и уступают Grunt, но для каждой задачи должен быть соответствующий инструментарий.
Потому что NPM только начинается модули через командную строку, тогда не нужно создавать или ждать недостающий модуль, скорее всего он уже реализован.
Установка НПМ
Хорошая особенность NPM заключается в том, что он установлен, если у вас установлен Node.JS. Вам нужно только написать файл конфигурации и вы Вы сможете выполнять основные шаги для создания и тестирования своих проектов.
Пример конфигурации NPM
В данном случае нас интересуют блоки devDepency и scripts. В devDepances указываем какие модули будем использовать в разработке.{ "name": "FrontendTemplate", "description": "", "author": "Sergei Z.", "scripts": { }, "dependencies": { }, "devDependencies": { } }
В скриптах мы создаём скрипты для сборки и тестирования проекта.
Добавим пару полезных модулей.
{
"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 для генерации нашего HTML. Uglify-JS2. Модуль для минимизации JS-кода.
Меньше.
Модуль для компиляции css из меньшего количества файлов.
JSHint. Модуль проверки JS кода на качество.
Я настоятельно рекомендую использовать его.
Руководитель.
Модуль для запуска JS-приложений или команд при изменении файлов в каталоге.
Мы сохраняем это в package.json. Перейдите в каталог и запустите установку npm. NPM загрузит модули в каталог node_modules. Это только установка модулей; что касается их запуска, нам нужно добавить в наш конфиг раздел скриптов.
Также
нам понадобится 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 --no-restart-on exit --exec npm -- run build"
},
"repository": "",
"author": "Sergei Z.",
"dependencies": {
},
"devDependencies": {
"supervisor": "*",
"jshint": "~1.1.0",
"less": "~1.3.3",
"jade": "*",
"uglify-js2": "*"
}
}
меньше скрипт компилирует less из папки src/less в css и помещает его в папку build/css уродовать-js2 скрипт минимизирует весь js-код из папки src, включая библиотеки из папки lib, и помещает его в папку build/js нефрит скрипт компилирует html из папки src/jade и помещает его в сборку строить Меньше запускает скрипты uglify и jade один за другим начинать Псевдоним для сборки смотреть запускает супервизор и просматривает каталог src и при изменении файлов с расширением less, js, jade запускает скрипт сборки
Вы можете запустить любой из сценариев с помощью команды npm run %commandname%.
Например, npm run build. Например, npm run build для сборки проекта или npm run watch для мониторинга каталога и перестройки в случае изменения файлов.
NPM и TDD\BDD
Я использую тесты для своих проектов, поэтому я также установил Mocha и PhantomJS для тестирования своего кода.
Вы можете увидеть, что из этого получилось Здесь
Интеграция с IDE
Поскольку NPM использует командную строку, интеграция NPM с IDE становится очень простой задачей.
Например, расширение Shell Turtlestein для Sublime Text 2 позволяет запускать команды из IDE и наблюдать за выводом команд непосредственно из IDE.
Заключение
Node.JS предоставляет хороший набор инструментов для разработки внешнего интерфейса и отлично справляется со своей задачей, если у вас небольшой проект и вы можете управлять им из командной строки, но он недостаточно гибок, если вам нужно расширенное управление проектами.В этом случае лучше посмотреть на Grunt. Теги: #node.js #frontend #npm #JavaScript #HTML #tdd #bdd #разработка веб-сайтов #JavaScript #tdd
-
Психография Против Демографии
19 Oct, 24 -
Германия
19 Oct, 24
