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:

• 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-pug — compiling Pug to HTML;
• 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-replace - a string replace plugin for gulp;
• 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-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.