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
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
This project contains the following loaders & plugins:
node-sass
for compiling sass (SCSS)gulp-babel
for compiling ES6 codeBrowser-sync
for hot-reloadinggulp-uglify
for compressing JSgulp-clean-css
for compressing CSSgulp-sourcemaps
for mapping into css filegulp-rev
for filename hashinggulp-imagemin
for optimising images
Note: if you've previously installed Gulp globally, run npm rm --global gulp
to remove it. Details here.
Make sure these are installed first.
-
npm install --global gulp-cli
-
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.
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
.
-
Add your HTML files by inserting or including them in the
src
directory (By defaultindex.html
is added to the directory, feel free to edit it with the changes seen live.)- For the new
HTML
file(s), link thestyles.css
(in head tag) andbundle.js
(in body tag) file in theHTML
files as they are created.<head> : <link rel="stylesheet" href="css/style.css" /> </head> <body> : <script src="js/bundle.js"></script> </body>
- For the new
-
Add
sass
(SCSS) files tosrc/sass
folder.- Make sure you import the scss file in
main.scss
@import "filename";
- Make sure you import the scss file in
-
Add
images
tosrc/assets
folder.
Code released under the MIT License.