jeanremy / kickstart

A kickstarter base

#Personnal Kickstart#

A way to save my configuration and to init projects

##Sublime Text Setup##

###Package Control### A better way to handle plugins

Installation

###Emmet### HTML helper

Installation

##Gulp workflow## src: Mark Goodyear

Just clone the repo & install the package (you still need to have gulp and bower installed globally)

    npm install & bower install

For full installation of gulp, please refer to the official repo: Gulp on GitHub

In caseof conflicts sudo npm install --save-dev browser-sync gulp gulp-autoprefixer gulp-cache gulp-combine-media-queries gulp-concat gulp-filter imagemin-pngquant gulp-imagemin gulp-minify-css gulp-plumber gulp-pxtorem gulp-rename gulp-ruby-sass gulp-uglify

Based on a specific organisation:

			Project
	        ├── css
	        │   ├── main.css
	        │   └── main.min.css
	        ├── img
	        │   ├── favicon
	        │   │   └── ...
	        │   ├── original
	        │   │   └── ...
	        │   └── ...
	        ├── inc
	        │   └── ...
	        ├── js
	        │   ├── vendor
	        │   │   └── ...
	        │   ├── main.js
	        │   └── main.min.js
	        ├── sass
	        │   ├── _forms.scss
	        │   ├── _fonts.scss
	        │   ├── _glyphicons.scss
	        │   ├── _common.scss
	        │   ├── _print.scss
	        │   ├── _reset.scss
	        │   ├── _typo.scss
	        │   ├── _variables.scss
	        │   ├── _mixins.scss
	        │   └── main.scss
	        ├── index.html
	        ├── package.json
	        └── gulpfile.js

What is doing Gulp?

• Sassify all files, autoprefix it, create main.css, then minify it into main.min.css
• Take all js except vendor, concatenate it, minify and rename it into main.min.js
• Take images located in img/original, copy it in img/ and minify it
• Livereload all

Things to do: Make a minify task (js) for the end of projects

Further reading:

Mark Goodyear Travis Maynard