Giter VIP home page Giter VIP logo

gulp-scss-boilerplate's Introduction

Gulp STARTER TEMPLATE

Note

The docs folder is for demo purposes only.

Changes should be commited to src files only.

The dist folder is not kept in source control.

How to use

The template is built with Sass and Gulp build system with these features:

  • Handlebars HTML templates with Panini – a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON or YAML.
  • Sass compilation, prefixing with autoprefixer, and javaScript concatenation
  • Built-in BrowserSync server - will automatically reload your page when files are changed. It also live-injects CSS changes when you save a Sass file. This task runs continuously and defaults to localhost.
  • For production builds - CSS compression, JavaScript compression, Image compression and more.

Requirements

To use this template, your computer needs:

  • Node.js is used to run the build processes. https://nodejs.org/en/download/
  • Run node -v in the terminal
  • npm (Node comes with npm installed so you should have a version of npm.) Used to manage development dependencies.
  • Run npm -v in the terminal
  • Gulp – task runner npm install -g gulp
  • Run gulp -v in the terminal

Installing:

  • Clone this repo: git clone https://github.com/johndavemanuel/bootstrap-gulp-starter-template.git
  • Navigate into the repo directory: cd bootstrap-gulp-starter-template
  • Install all node packages: npm install
  • Run gulp development
  • Your site is now viewable at this URL: http://localhost:3000
  • To create compressed, production-ready assets run gulp production. This will delete everything in the dist folder and recreate all of your complied files. Never make updates directly into the dist folder as these files get overridden each time.

Folder Structure:

  • dist/ - compiled distribution files
  • node_modules - front-end dependencies
  • src/ - contains all of your core, working files—static assets, pages, templates, etc
  • src/assets/ - scss files, JS files, images, and fonts
  • src/data/ - external data (JSON or YAML)
  • src/layouts/ - HTML layouts templates
  • src/pages/ - site pages
  • src/partials/ - handlebars partials files.
  • gulpfile.js - all task definitions
  • package.json - handles the project dependencies
  • .htmllintrc - handles the HTML lint rules
  • .sass-lint.yml - handles the SCSS lint rules
  • reports - txt generated file for accessibility issues

Includes:

Gulp Plugins:

Additional Resources:

License

MIT

Buy Me A Coffee

gulp-scss-boilerplate's People

Contributors

mehmetpolat avatar

Stargazers

Furkan Balaman avatar Ali fırat Güler avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.