Gulp + Sass + Pug skeleton

This is a skeleton to build static websties using Pug and Sass, plus a live-reload webserver for faster development. It uses:

• Gulp to automate build tasks, plus Gulp Connect to provide a local server with live reload .
• Pug template engine to streamline html writing.
• Sass, to modularize and minimize the CSS written.
• Bootstrap, Framework front-end.
• Jquery, Framework Javascript.
• Font-Awesome, Icons and social logos

Extra things to make your website faster:

• CSS minification: both CSS and SASS files are automatically minified.
• HTML minification: the output of Pug files is minified.

Documentation

Set-up instructions

1. Clone locally or download this repo, e.g.: * ``
2. Install (if you don't have them): * Node.js: Just download v13.5.0 and install. Alternatively, if you're on OS X, you can do brew install node . * Gulp: In a shell console type npm install -g gulp-cli. * Gulp plugins and app dependencies: Open the repo directory in the console and type npm install or, shorter, npm i.
   • This will install any neded Node modules (cssmin, Pug, sass...)

What's included

Within the download you'll find the following directories and files:

├── src                   Working directory. Contains some sample files
│   ├── assets             Static assets for the site
│   │   ├── css             Yours or others' CSS files, e.g. bootstrap.css. Will be minified.
│   │   ├── fonts           Custom fonts
│   │   ├── js              Yours or others' JS files, e.j. jquery.js
│   │   └── robots.txt      Default robots.txt (allows crawling everything)
│   ├── images            Images in here get minified by gulp-imagemin.
│   │   └── *
│   ├── js                Scripts in here get minified by gulp-uglify
│   │   └── *
│   ├── pug                Pug files to be processed by gulp-pug.
│   │   ├── templates       Partial views.
│   │   ├── index.pug       Sample index.
│   │   └── *.pug           Your Pug files.
│   └── sass	           SASS files to be processed by gulp-less.
│       ├── style.sass	    Sample style.
│       └── *.sass 	        Your sass files.
├── public                 Build directory. Don't put anything here, Gulp does.
│   ├── css	               Minified CSS from assets and compiled LESS.
│   │                      Bootstrap and FontAwesome
│   ├── fonts	             Copied asset fonts.
│   ├── webfonts           Copied asset fonts from fontawesome.
│   ├── images	           Minfied asset images.
│   ├── js 	               Copied asset Javascript.
│   ├── robots.txt 	       Copied asset robots.txt.
│   └── *.html	           Compiled Pug files. Html is minified.
├── gulpfile.js           Gulp tasks configuration
├── package.json          Package configuration
└── README.md             This file

Note that everything in src/assets/ just gets copied to public/js. For example, src/assets/js are just copied, while src/js get processed by gulp-uglify. The same would happen with images found in src/assets instead of src/images.

Running it

Everything is run with Gulp.

Defined gulp tasks are:

• gulp to run all default tasks only once
• gulp server to run all tasks AND start the webserver plus a watch task. This will automatically process changes, in real time, in your source files and make them available in the local web server, and will also automatically reload your browser.
• gulp dev remove public folder and then run all tasks AND start the webserver plus a watch task.
• gulp clean remove public folder

Test it

• Run gulp server
• Open http://localhost:3000 in your browser. This simple html files contains some hints if you don't know how to start.

Modifying gulp tasks

• gulpfile.js defines the tasks that are done.
• To easily modify directory names and file matcher at your discretion, they're all defined in constants.

Developing your site

• src/ dir is where you put your code and assets.
• public/ dir is fully auto-generated by Gulp. Your HTML files and everything else will be here.

Deploying your site into production

Just copy into your server everything generated in the public/ dir and you should be fine to go.

Make sure that your Pug templates generate an index.html or that your server is configured to serve any other file you want as default.

It's also possible to configure you server to automatically deploy the /public folder from a branch of your Git fork, but it's out of the scope of this Readme.

Built by

Jesús Olvera Juárez(jeojhx)

Inspired By

https://github.com/OscarDCorbalan/gulp-less-pug-skeleton