monkviper / starterkit

A Front End development Gulp.js based workflow. 🚀

Carlos Cuesta Starter Kit

A simple starterkit boilerplate that I use to realize my front end static development projects. If you have comments or suggestions feel free to give me a shout on Twitter! Also checkout the yeoman generator-startekit.

Technologies

• Gulp - Automate and enhance your workflow
• Pug - Terse language for writing HTML templates.
• SASS - CSS with superpowers.
• Babel - Use next generation JavaScript, today (ES5 => ES6).
• Flexboxgrid - A grid system based on the flex display property.
• NodeJS - JavaScript runtime built on Chrome's V8 JavaScript engine.

Requirements and Use

Requirements

• Node.js
• Gulp

$ npm install -g gulp

Use

$ git clone https://github.com/carloscuesta/starterkit.git
$ cd starterkit/ && npm install
$ gulp

Tasks

gulp: Runs the default task (dev) including the following ones :

• styles: SCSS compiling to CSS, css minification and autoprefixing.
• templates: Pug compiling and rendering to HTML.
• scripts: ES6 to ES5 with babel, scripts minification and concatenation into a single file.
• images: Image compression.
• beautify: Beautify your preproduction files at ./dist/.
• serve: Starts a server at ./dist/ with all your compiled files, looking for file changes and injecting them into your browser.

gulp build: Builds your project. runs the following tasks:

• styles
• templates
• scripts
• images
• beautify

gulp optimize: Optimizes your project (to improve the pagespeed) runs:

• uncss: Removes unused CSS from your styles file using uncss.
• critical: Extract and inline critical-path (above-the-fold) CSS from HTML using critical
• images

gulp deploy: Deploy your dist folder into your server or surge cloud runs:

• optimize
• ftp: Uploads dist to ftpUploadsDir.
• surge: Uploads your dist to Surge

If you want to use the deploy task, you will have to edit the gulpfile.js lines between 65-69 with your ftp connection info: host | user | password. If you want to use Surge instead of FTP, just setup a domain name in the surgeInfo.domain

Once you setup ftpCredentials, you will have to choose a directory of your server where the deploy will go: ftpUploadsDir

Now you will be able to use gulp deploy and your /dist/ folder will go up to your ftp server!

Use npm run to list the gulp tasks available. You can run the tasks too using the npm run scriptname that is on the list.

Project Structure

.
├── /dist/                   # Minified, optimized and compiled files.
│   ├── /assets/             # Assets folder.
│   │   ├── /css/            # CSS style files.
│   │   ├── /files/          # Static files.
│   │   │   └── img/         # Images folder.
│   │   └── /js/             # JS files.
│   └── *.html               # Rendered and compiled HTMLs from Pug.
├── /node_modules/           # Node modules dependencies and packages.
├── /src/                    # Source files.
│   ├── /images/             # Images non compressed.
│   ├── /scripts/            # JavaScript files.
│   ├── /styles/             # SCSS style files.
│   │   └── _includes/       # Styles SCSS partials.
│   ├── /templates/          # Templating Pug files.
│   │   └── _includes/       # Templating Pug partials.
└── gulpfile.js              # Gulp automatization file.

Demo

License

The code is available under the MIT license.