https://github.com/adamisntdead/boilerplate

A Modern, Gulp Based, Front End Build Setup 😊
https://github.com/adamisntdead/boilerplate

boilerplate build front-end-development frontend gulp

Last synced: about 1 month ago
JSON representation

A Modern, Gulp Based, Front End Build Setup 😊

• Host: GitHub
• URL: https://github.com/adamisntdead/boilerplate
• Owner: adamisntdead
• Created: 2018-07-04T08:20:27.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-23T12:06:12.000Z (over 6 years ago)
• Last Synced: 2024-10-25T03:59:26.021Z (3 months ago)
• Topics: boilerplate, build, front-end-development, frontend, gulp
• Language: CSS
• Homepage:
• Size: 4.3 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Boilerplate

This is a build system boilerplate for frontend projects.

This is not for sites that use frameworks such as Vue, React or Angular.

## Features

* Sass

* Autoprefixer

* HTML Includes

* Minification

* JS Module Bundling

* Image Optimization

* Moves Everything To An Output Folder

* Adds Image Sizes To HTML Inline (for the backend developers!)

* Clean up your source code (HTML and JS)

* Live Reloading / Rebuilding

## What Are We Using?

* For the CSS - [csso](https://css.github.io/csso/csso.html), [sass](https://sass-lang.com/), [autoprefixer](https://github.com/postcss/autoprefixer)

* For the JS - [Babel](https://babeljs.io/), [Prettier](https://prettier.io/), [Browserify](http://browserify.org/), [Tinyify](https://github.com/browserify/tinyify)

* For the HTML - [gulp-html-beautify](https://www.npmjs.com/package/gulp-html-beautify), [gulp-inline-imagesize](https://www.npmjs.com/package/gulp-inline-imagesize)

* And some more - [imagemin](https://github.com/imagemin/imagemin)

## Usage

First install the dependencies:

```bash

$ npm install

```

Or if you float that way,

```bash

$ yarn

```

Then you can run the scripts.

There is 4 main tasks:

* `npm run dist` - Build the production version of the site (think minify and optimize)

* `npm run dev` - Build the development version of the site (think faster)

* `npm run watch` - Like `npm run dev` but it watches for changes and builds incrementally

* `npm run format` - Clean up your HTML and JS source code

## License

MIT