Gulppack. Версия с SCSS

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

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

• browser-sync - живая перезагрузка веб-страницы при внесении изменений в файлы вашего проекта. Одна из опций — tunnel, которая выдаёт вам ссылку, чтобы любой желающий смог посмотреть вашу работу (в обход хостинга);
• gulp-autoprefixer — автоматически расставляет вендорные префиксы в CSS в соответствии с сервисом Can I Use;
• gulp-babel - использование ES6 с Babel;
• gulp-uglify — минификация JS-файлов;
• 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-rigger - позволяет вставлять содержимое из отдельных файлов в основной;
• gulp-newer — дополнительный плагин к gulp-imagemin, позволяет сжимать только новые изображения;
• gulp-plumber — оповещения в командной строке (например, ошибки в SCSS/Sass);
• 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-scss.git;
• установите gulp глобально: yarn global add gulp-cli;
• перейдите в скачанную папку со сборкой: cd gulppack-scss;
• введите команду, которая скачает необходимые компоненты для корректной работы нашей сборки, указанные в файле package.json: yarn;
• введите последнюю команду: gulp.

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

Bower?

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

---

Gulppack. SCSS version

Gulppack is a very useful gulp build for your front-end projects. Compile SCSS, 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:

• browser-sync - live reloading your web page. Browsersync makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices;
• gulp-autoprefixer - parsing CSS and add vendor prefixes to rules by Can I Use;
• gulp-babel - use next generation JavaScript with Babel;
• gulp-uglify - minifing JS files;
• gulp-concat - concatenates files;
• gulp-sass - compiling SCSS to CSS;
• gulp-clean-css - minifing CSS files;
• gulp-sourcemaps - generating the sourcemaps;
• gulp-rename - renaming files, adding prefix, suffix;
• gulp-imagemin - minify PNG, JPEG, GIF and SVG images;
• imagemin-pngquant - pngquant imagemin plugin;
• imagemin-jpeg-recompress - jpeg-recompress imagemin plugin;
• gulp-favicons - favicons generator for your projects;
• gulp-iconfont — generate iconic fonts from your SVG;
• gulp-iconfont-css — generate styles for your iconic fonts;
• gulp-svg-sprites — create SVG sprites;
• gulp-replace - a string replace plugin for Gulp;
• gulp-rigger - Rigger is a build time include engine for Javascript, CSS, CoffeeScript and in general any type of text file that you wish to might want to "include" other files into;
• gulp-newer - piping the source files to newer before imagemin ensures that only those images that have changed are minified;
• gulp-plumber - notifications in your terminal (SCSS/Sass errors for example);
• gulp-debug - debug Vinyl file streams to see what files are run through your Gulp pipeline;
• gulp-watch - file watcher;
• gulp-clean — removes files and folders.

How to use:

• Install Yarn.

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-scss.git;
• install gulp globally: yarn global add gulp-cli;
• go to the folder: cd gulppack-scss;
• 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 .html, .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 .html.