The gulp-sass-bootstrap-boilerplate from abhijithvijayan

gulp-sass-bootstrap-boilerplate's Introduction

gulp-sass-bootstrap-boilerplate

SASS · Babel · Bootstrap · Gulp · JQuery · PopperJS · Browsersync

This Gulp-Sass boilerplate starter contains the features and scripts you need to get started quickly with Gulp Runner and building, Live Loading.

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

It contains the following features:

GulpJS
Babel ES6 Compiler
Bootstrap v4
JQuery v3.3.1
PopperJS
Concatenate and minify JavaScript.
Compile, minify, autoprefix SASS.
Browser-Sync Hot-Reloading
Optimize and Cache Images

Features

Gulp Loaders and Plugins

This project contains the following loaders & plugins:

node-sass for compiling sass (SCSS)
gulp-babel for compiling ES6 code
Browser-sync for hot-reloading
gulp-uglify for compressing JS
gulp-clean-css for compressing CSS
gulp-sourcemaps for mapping into css file
gulp-rev for filename hashing
gulp-imagemin for optimising images

Getting Started

Dependencies

Note: if you've previously installed Gulp globally, run npm rm --global gulp to remove it. Details here.

Make sure these are installed first.

Node.js
Gulp Command Line Utility

npm install --global gulp-cli

Quick Start

Clone the repo :

git clone https://github.com/abhijithvijayan/gulp-sass-boilerplate.git
In bash/terminal/command line, cd gulp-sass-boilerplate into project directory.
Run npm install to install required files and dependencies.
Launch the development environment with :

gulp

then, navigate to http://localhost:3000

Note: For Production, Use:

gulp build

This will build files and assets to dist directory.

Documentation

Workflow structure

src - > source directory

dist -> build directory

.
├── src
│   ├── assets
│   │   └── 500x300.jpg
│   ├── sass
│   │   ├── _fonts.scss
│   │   ├── _variables.scss
│   │   └── main.scss
│   ├── index.js
│   └── index.html
.
.
├── dist
│   ├── assets
│   │   ├── 500x300.jpg
│   │   └── rev-manifest.json
│   ├── css
│   │   └── style.min.css
│   ├── js
│   │   └── bundle.min.js
│   └── index.html
.

Instructions

Add your HTML files by inserting or including them in the src directory (By default index.html is added to the directory, feel free to edit it with the changes seen live.)
- For the new HTML file(s), link the styles.css (in head tag) and bundle.js (in body tag) file in the HTML files as they are created.
```
<head>
    :
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    : 
    <script src="js/bundle.js"></script>
</body>
```
Add sass(SCSS) files to src/sass folder.
- Make sure you import the scss file in main.scss
```
@import "filename";
```
Add images to src/assets folder.