Alternatives and detailed information of gulp-sass-bootstrap-boilerplate

Gulp Webpack Starter - fast static website builder. The starter uses gulp toolkit and webpack bundler. Download to get an awesome development experience!

Stars: ✭ 199 (+729.17%)

Mutual labels: gulp, browsersync

lead

Sink your streams.

Stars: ✭ 14 (-41.67%)

Mutual labels: gulp, gulpjs

Gopablo

🐺 Static site generator.

Stars: ✭ 166 (+591.67%)

Mutual labels: gulp, browsersync

Stellar

Stellar is completely based on the latest version of Bootstrap 4. Stellar Admin is designed to reflect the simplicity and svelte of the components and UI elements and coded to perfection with well-organized code.

Stars: ✭ 176 (+633.33%)

Mutual labels: gulp, bootstrap4

gulp

Gulp Türkçe Çeviri

Stars: ✭ 37 (+54.17%)

Mutual labels: gulp, gulpjs

View All Similar Projects ➔

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.

Licence

Code released under the MIT License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

abhijithvijayan / gulp-sass-bootstrap-boilerplate

Programming Languages

Labels

Projects that are alternatives of or similar to gulp-sass-bootstrap-boilerplate