Skip to content
Travel landing for portfolio
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gulp
src
.eslintignore
.eslintrc
.gitignore
.prettierignore
.prettierrc
.stylelintrc
LICENSE
README.md
gulpfile.js
package.json

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-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.


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.

You can’t perform that action at this time.