Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhijithvijayan/gulp-sass-bootstrap-boilerplate
⏰📌 Boilerplate with gulp.js, Sass, Babel, and Browsersync.
https://github.com/abhijithvijayan/gulp-sass-bootstrap-boilerplate
babel babeljs boilerplate-template bootstrap bootstrap-boilerplate bootstrap4 browsersync devserver gulp gulpjs jquery livereload-server popperjs sass
Last synced: about 1 month ago
JSON representation
⏰📌 Boilerplate with gulp.js, Sass, Babel, and Browsersync.
- Host: GitHub
- URL: https://github.com/abhijithvijayan/gulp-sass-bootstrap-boilerplate
- Owner: abhijithvijayan
- License: mit
- Archived: true
- Created: 2018-12-21T16:49:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:42:26.000Z (almost 2 years ago)
- Last Synced: 2024-09-24T08:02:07.554Z (about 1 month ago)
- Topics: babel, babeljs, boilerplate-template, bootstrap, bootstrap-boilerplate, bootstrap4, browsersync, devserver, gulp, gulpjs, jquery, livereload-server, popperjs, sass
- Language: JavaScript
- Homepage: https://abhijithvijayan.github.io/gulp-sass-bootstrap-boilerplate/
- Size: 2.82 MB
- Stars: 24
- Watchers: 4
- Forks: 9
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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
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.](https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467)*
Make sure these are installed first.
- [Node.js](http://nodejs.org)
- [Gulp Command Line Utility](http://gulpjs.com)
`npm install --global gulp-cli`
### 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.
```
:
:
```
- 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](https://github.com/abhijithvijayan/gulp-sass-boilerplate/blob/master/LICENCE).