Краткая инструкция по установке/настройке markup для нового проекта.
Что используется:
Markup находится в git репозитории тут.
Начало:
Клонируем его, заходим в папку нового проекта, удаляем файлы git и создаём новые, поскольку у нашего нового проекта будет "своя история":
$ git clone http://git.ddm-studio.com:8080/scm/git/markup-template <имя нового проекта>
$ cd <имя нового проекта>
$ rm -rf .git && git initДля сборки проекта понадобится npm. Следуем инструкции по установке nodejs, поскольку npm является частью nodejs. И устанавливаем с помощью npm всё что нам необходимо для сборки:
$ cd markup
$ npm install
$ bower install # (`$ npm run bower -- install`, если bower не установлен в системе глобально)Конфигурация:
Конфигурационные файлы находятся в папке markup:
- package.json - список инструментов для сборки проекта и информация о проекте
- .babelrc - конфигурационный файл JS-трансплитера Babel
- gulpfile.babel.js - конфигурационный файл сборщика gulp
- .eslintrc.json - конфигурационный файл линтера ESLint
- .editorconfig - конфигурационный файл для редакторов/IDE EditorConfig
- bower.json - список инструментов для сборки проекта и информация о проекте
- .gitignore - список файлов/папок которые git не должен добавлять в репозиторий
Все исходники хранятся в папке markup/src и компилируются с помощью gulp в папку markup/build. Файлы для подключения css/js плагинов:
- markup/src/scss/application.scss, по законам импорта SASS
- markup/src/js/app/application.js, по законам импорта gulp-file-include
- markup/src/js/vendor/vendor.js, по законам импорта gulp-file-include
Рабочий процесс:
Список команд сборщику gulp (пути указаны относительно папки markup, и если gulp не установлен глобально в системе,- используйте npm run gulp -- <опции для gulp>):
gulp build:vendor- копирует содержимое папок js/css плагинов из src/vendor в build/vendor файлы с расширениями css,jpg,jpeg,png,ico,gif,svg,eot,ttf,woff,woff2 (можно перенастроить в gulpfile.babel.js).gulp build:html- собирает с помощью Pug *.html файлы в папку build.gulp lint- проверяет JS на соответствие код-стайлу с помощью ESLint (by Google + немного своего в .eslintrc.json) в src/js/app/**/*.js.gulp build:js:app- собирает с помощью gulp-file-include *.js файлы перечисленные в src/js/app/application.js в файлы build/js/application.js.gulp build:js:vendor- собирает с помощью gulp-file-include *.js файлы перечисленные в src/js/vendor/vendor.js в файлы build/js/vendor.js.gulp build:js- объединяет в себе все вышеперечисленные командыgulp build:js:<something>.gulp build:styles- собирает с помощью SASS *.scss(*.css) файлы перечисленные в src/scss/application.scss в файл build/css/application.css.gulp build:img- копирует с обработкой через imagemin содержимое папки статичных рисунков/иконок из src/img в build/img.gulp build:pic- копирует содержимое папки временных рисунков-заглушек из src/pic в build/pic.gulp build:fonts- копирует содержимое папки src/fonts в build/fonts.gulp build- объединяет в себе все вышеперечисленные командыgulp build:<something>.gulp clean:build- удаляет содержимое папки build.gulp clean:cache- удаляет cache командыbuild:img(необходимо выполнять, если заменяете какой-либо из рисунков в build/img, т.е. имя файла осталось прежним, но содержимое файла изменилось).gulp clean- объединяет в себе все вышеперечисленные командыgulp clean:<something>.gulp watch- следит за изменениями в исходных файлах папок src и проводит сборку изменённых частей проекта (исключая папку src/vendor, для них естьgulp build:vendor).gulp serve- запускает стрим веб-сервер browserSync по адресу http://<IP вашего компьютера или 127.0.0.1 или localhost>:9000/ используя папку build.gulp- выполняетgulp build,gulp serve,gulp watch. (основная команда)
Список команд bower (необходимо запускать из папки markup проекта, и если bower не установлен глобально в системе,- используйте npm run bower -- <опции для bower>):
bower search <название js/css библиотеки>- поиск нужного js/css плагина по имени.bower install <название js/css библиотеки> --save- установка нужного js/css плагина.