Frontend development with pleasure. Pug + SCSS version
Clone or download
andreyalexeich Merge pull request #5 from andreyalexeich/1.3.2
You can now create svg sprites
Latest commit 70b4a77 Nov 2, 2018

README.md

Gulppack. Версия с Pug + SCSS

Gulppack - сборка для автоматизации задач в повседневной front-end разработке. Компилируйте SCSS и Pug, сжимайте файлы, оптимизируйте картинки, пишите на ES6. При каждом сохранении файла в редакторе кода браузер автоматически перезагружает страницу. Не волнуйтесь о том, что вам придётся выполнять рутинную работу.

Что включает в себя сборка?

  • browser-sync - живая перезагрузка веб-страницы при внесении изменений в файлы вашего проекта. Одна из опций — tunnel, которая выдаёт вам ссылку, чтобы любой желающий смог посмотреть вашу работу (в обход хостинга);
  • gulp-autoprefixer — автоматически расставляет вендорные префиксы в CSS в соответствии с сервисом Can I Use;
  • gulp-babel - использование ES6 с Babel;
  • gulp-uglify — минификация JS-файлов;
  • gulp-pug — компиляция Pug в HTML;
  • gulp-concat - объединение файлов;
  • gulp-sass — компиляция SCSS в CSS;
  • gulp-clean-css — минификация CSS-файлов;
  • gulp-sourcemaps - карта стилей;
  • gulp-rename — переименование файлов, добавление суффиксов и префиксов (например, добавление суффикса .min к минифицированным файлам);
  • gulp-imagemin — сжатие изображений PNG, JPG, GIF и SVG;
  • imagemin-pngquant — дополнение к gulp-imagemin для работы с PNG-изображениями;
  • imagemin-jpeg-recompress — дополнение к gulp-imagemin для работы с JPG-изображениями;
  • gulp-favicons — генератор фавиконок для вашего проекта;
  • gulp-iconfont — генератор иконочного шрифта из SVG-изображений;
  • gulp-iconfont-css — генератор стилей для иконочного шрифта;
  • gulp-svg-sprites — создание SVG-спрайтов;
  • gulp-replace - замена строк;
  • gulp-newer — дополнительный плагин к gulp-imagemin, позволяет сжимать только новые изображения;
  • gulp-plumber — оповещения в командной строке (например, ошибки в Sass/SCSS);
  • gulp-debug — отладка в терминале;
  • gulp-watch — отслеживание изменений в ваших файлах проекта;
  • gulp-clean — удаление файлов и папок.

Как пользоваться?

Установите Yarn.

Yarn - это современная альтернатива npm. Yarn работает с тем же файлом package.json и так же скачивает необходимые модули в папку node_modules, но делает это намного быстрее.

Далее, используя cmd в Windows или Терминал Linux/macOS, проделайте следующие шаги:

  • скачайте сборку: git clone https://github.com/andreyalexeich/gulppack-pug.git;
  • установите gulp глобально: yarn global add gulp-cli;
  • перейдите в скачанную папку со сборкой: cd gulppack-pug;
  • введите команду, которая скачает необходимые компоненты для корректной работы нашей сборки, указанные в файле package.json: yarn;
  • введите последнюю команду: gulp.

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером и работающим browser-sync. Теперь если вы внесёте изменения в файлы .pug, .scss, .js, браузер сам перезагрузит веб-страницу, а Gulp заново соберёт ваш проект в папке dest.

Bower?

Вместо Bower используйте yarn. Например, вам нужен jQuery (уже используется в сборке в качестве примера), введите команду: yarn add jquery, затем соберите: gulp vendor и запустите: gulp. Вам остаётся подключить данную библиотеку в ваш .pug.


Gulppack. Pug + SCSS version

Gulppack is a very useful gulp build for your front-end projects. Compile SCSS and Pug, compress the files, optimize the pictures, write ES6. It reloads your browser automatically every time you save a file in a code editor. Don't care about tedious things, leave it to us!

What includes:

How to use:

Yarn is a modern alternative to npm. Yarn works with the same package file.json and just downloads the required modules into the folder node_modules, but does it much faster.

Then using cmd in Windows or Terminal in Linux/macOS, please do the following:

  • clone the repository: git clone https://github.com/andreyalexeich/gulppack-pug.git;
  • install gulp globally: yarn global add gulp-cli;
  • go to the folder: cd gulppack-pug;
  • enter the command that downloads the required components: yarn;
  • run Gulp: gulp.

Your web browser will open with local server and running browser-sync. Now if you make changes to the files .pug, .scss or .js, your web browser will reload the web page itself, and Gulp will re-build your project in the dest folder.

Bower?

Use yarn instead of Bower. For example, you are need in jQuery (already used in this project as an example), then using cmd in Windows or Terminal in Linux/macOS install it: yarn add jquery, build it: gulp vendor and run: gulp. All you have to do is connect this library to your .pug.