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
$ 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 criticalimages
gulp deploy
: Deploy your dist
folder into your server or surge cloud runs:
optimize
ftp
: Uploadsdist
toftpUploadsDir
.surge
: Uploads yourdist
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.