Предполагается, что GIT и Node.js уже установлены на вашей машине глобально. Если нет, то скачиваем и выполняем установку. Все команды необходимо набирать в консоли, находясь в корневой папке проекта.
Выполняем из консоли следующую команду (точка в конце обязательна):
> git clone https://github.com/gitolog/ss-toolkit.git .
При этом в корень проекта будут скопированы файлы gulpfile.js и package.json,необходимые для дальнейшей установки.
Если Gulp уже установлен, этот пункт можно пропустить.
> npm install -g gulp
Ключ -g говорит о том, что устанавливается системно.
> npm install --save-dev
Будут установлены модули, перечисленые в файле package.json:
Все команды набираются в окне терминала IDE WebStorm или PhpStorm или из консоли
> gulp build
-
Выполнится полная очистка папки /build
-
Выполнится компиляция всех файлов *.styl из папки /kit-src в папку /build/css
-
Выполнится минификация файлов *.css в папке /build/css, а так-же их клонирование в папку /www/css
-
Выполнится компиляция всех файлов *.js из папки /kit-src. Скрипты будут объединены в один файл в папке /build/js
-
Выполнится минификация файлов *.js в папке /build/js, а так-же их клонирование в папку /www/javascript
> gulp
Эта задача запускается для отладки при внесении изменений в исходные файлы стилей и скриптов тулкита. Результат компиляции будет перезаписывать выходные файлы в папке /build
-
При изменении любого из файлов *.styl в папке /kit-src выполнится сборка и минификация CSS в папку /build/css, а так-же клонирование в папку /www/css
-
При изменении любого из файлов *.js в папке /kit-src выполнится сборка и минификация JS в папку /build/js, а так-же клонирование в папку /www/javascript
Для автоматического обновления окна браузера во время редактирования скриптов, стилей и шаблонов необходимо установить плагин LiveReload:
[Плагин для Google Chrome] (https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
[Плагин для Mozilla Firefox] (https://github.com/downloads/siasia/livereload-extensions/LiveReload-2.0.9.xpi)