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-sassfor compiling sass (SCSS)gulp-babelfor compiling ES6 codeBrowser-syncfor hot-reloadinggulp-uglifyfor compressing JSgulp-clean-cssfor compressing CSSgulp-sourcemapsfor mapping into css filegulp-revfor filename hashinggulp-imageminfor 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-boilerplateinto project directory. -
Run
npm installto install required files and dependencies. -
Launch the
development environmentwith :gulpthen, 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
srcdirectory (By defaultindex.htmlis added to the directory, feel free to edit it with the changes seen live.)- For the new
HTMLfile(s), link thestyles.css(in head tag) andbundle.js(in body tag) file in theHTMLfiles 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/sassfolder.- Make sure you import the scss file in
main.scss@import "filename";
- Make sure you import the scss file in
-
Add
imagestosrc/assetsfolder.
Code released under the MIT License.