gulp-sass-bootstrap-boilerplate icon indicating copy to clipboard operation
gulp-sass-bootstrap-boilerplate copied to clipboard

Published 20 hours ago • verified publisher icon abhijithvijayan
→

Metadata

⏰📌 Boilerplate with gulp.js, Sass, Babel, and Browsersync.

gulp-sass-bootstrap-boilerplate

travis gulp Bootstrap node-sass jQuery livereload

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

Buy Me a Coffee

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.

Quick Start

  1. Clone the repo :

    git clone https://github.com/abhijithvijayan/gulp-sass-boilerplate.git

  2. In bash/terminal/command line, cd gulp-sass-boilerplate into project directory.

  3. Run npm install to install required files and dependencies.

  4. 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.

Licence

Code released under the MIT License.

← Metadata

24
Stars
9
Forks
Watchers

Owner

verified publisher icon abhijithvijayan

Metadata

⏰📌 Boilerplate with gulp.js, Sass, Babel, and Browsersync.

Back