Создание новых проектов с помощью Google Starter Kit [Guide]

Google только что выпустил шаблон под названием Google Web Starter Kit, Web Starter Kit призван помочь веб-разработчикам быстро начать новый проект веб-разработки.

Он содержит мощные инструменты, такие как BrowserSync, LiveReload, HTTP-сервер, PageSpeed, ImageMin, Sass Compiler, JSHint и несколько шаблонов, которые мы можем использовать для разработки веб-приложений, которые работают на нескольких устройствах. Давайте посмотрим, как мы можем начать использовать Web Starter Kit.

Начиная

Google Web Starter Kit можно загрузить с Google Web Starter Page и вы можете использовать его прямо сейчас. Но чтобы использовать инструменты, поставляемые с ним, вам необходимо установить следующие инструменты.

Во-первых, убедитесь, что у вас установлен NodeJS, который необходим для запуска ряда задач Gulp, включая PageSpeed, ImageMin и JSHint.

Поскольку Web Starter Kit использует Sass для создания CSS, вам также необходимо установить Ruby и Sass.

Наконец, вам также необходимо установить Gulp. Web Starter Kit также поставляется с несколькими плагинами Gulp, которые автоматизируют задачи разработки. Все плагины Gulp предварительно сконфигурированы в gulpfile.js, который находится в корневом каталоге Web Starter Kit.

Чтобы установить Gulp, используйте команду ниже.

нпм установить глоток

Как только все эти инструменты будут установлены, мы можем начать использовать Web Starter Kit.
Использование Web Starter Kit
Как уже упоминалось, вы можете скачать Web Starter Kit с Google Web Starter Page и распакуйте его в нужную папку. Другой способ получить комплект – использовать команду git для загрузки его из репозитория Github. Запустить:

git clone https://github.com/google/web-starter-kit.git

Эта команда скопирует весь Web Starter Kit на ваш компьютер. Это также принесет новую папку с именем «web-starter-kit», содержащую ряд папок, включая папку приложения, Gulpfile.js, package.json и другие. Далее мы установим зависимости Web Starter Kit (файлы и библиотеки, необходимые для разработки). Просто запустите эту команду, чтобы установить зависимости:

установка npm

Как только зависимости установлены, мы все настроены и можем приступить к созданию нашего веб-приложения. На данный момент все файлы и папки находятся в каталоге нашего проекта.

Построить веб-стартовый комплект с Gulp

Web Starter Kit оснащен плагинами Gulp для снижения веса наших задач по разработке. Ниже приведены некоторые полезные команды, которые вы можете иметь в виду. Запустите их в терминале или командной строке.

глотком служить. Эта команда обслуживает приложение в браузере с адресом localhost, а также запускает LiveReload он обновляет страницу в браузере всякий раз, когда вы вносите изменения в файлы. Команда также запустит BrowserSync. Как мы уже обсуждали в предыдущем уроке, BrowserSync будет синхронизировать взаимодействие с пользователем, например щелчки, прокрутку и перезагрузку страниц на нескольких устройствах при редактировании файлов.

Web Starter Kit в мобильной эмуляции Chrome.

gulp pagepeed – еще одна полезная команда. Эта команда покажет оценки производительности страниц вашего приложения в соответствии с Google PageSpeed ​​API. Это удобный инструмент, позволяющий получить представление о загрузке ваших страниц.

Команда gulp, в свою очередь, создает новую папку с именем dist folder, которая содержит готовые к распространению файлы. Файлы, такие как HTML, JS, CSS и изображения в этой папке, оптимизируются и сжимаются.

Несколько предостережений

Web Starter Kit создан с использованием самых современных веб-технологий. Web Starter Kit работает только с последними версиями браузеров, такими как Internet Explorer 10, Firefox 30, Chrome 34, Opera 23 и Safari 23. Кроме того, на основании моего теста, в Internet Explorer 9 есть несколько сбоев и любая более ранняя версия вышеупомянутых браузеров. Поэтому, если вы обязаны заставить ваше веб-приложение работать в старых браузерах, вам может потребоваться немного больше работы, чтобы заполнить технологические пробелы в этих браузерах.

Вывод

Использование Google Web Starter Kit поможет в разработке мощного и высокопроизводительного веб-приложения для нескольких устройств. Комплект содержит шаблоны для руководства по стилю и представляет собой мощный инструмент, который предварительно настроен, чтобы мы могли быстро разработать проект веб-приложения.