Slush Kickstart

A slush generator to scaffold front-end projects using Gulp Workflow.

• Features
• Getting Started
• Available Tasks
• Gulp Tasks Structure
• Folders Structure
• Configuration & Paths

Features

####Kickstart Features:

• Include foundation-sites framework
• Include bootstrap framework
• Include bootstrap v4.0.0-alpha (include sass)
• Include bulma framework
• Include most of icon fonts libraries (fontAwesome, ionicons, typicons ..)
• Include jQuery library
• Include all gulp workflow features below

####Gulp Workflow Features:

• Organized & splitting tasks files
• Using gulp-load-plugins
• Define tasks options & paths from one file
• Using bower to get dependencies
• Preview server with BrowserSync
• Cleans up file directories
• Plumber to handle gulp exceptions
• Sourcemaps for sass & js
• Sass compile with docs
• Js browserify & uglify
• Nunjucks templates
• Automagically inject css/js files
• Prettify html files
• Image optimization
• Generate favicons
• Concat css/js files
• & more, take a look at the gulp plugins used in package.json

Getting Started

• Install Node.js
• Install Gulp & Slush & bower globally

npm install -g gulp slush bower

• Install slush-kickstart globally

npm install -g slush-kickstart

• In terminal/command line, cd into your project directory
• Run the generator to scaffold your project

slush kickstart

• OR run the generator with --skip-install to skips the automatic execution of bower and npm after scaffolding has finished like that

slush kickstart --skip-install

• After all done installing and scaffolding has finished, you can run gulp tasks:
  • gulp to run default tasks for development
  • gulp build to build your project for production
  • gulp help to get a listing of available tasks

Available Tasks

Task Name	Subtasks	Description
clean	clean:cache - clean:prod	clean dest folders (dev & prod) & caches :: base/clean.js
bower	bower:clean - bower:scss - bower:js - bower:css - bower:fonts	dest all bower dependencies to source folder :: base/bower.js
fonts	---	copy all fonts to dev folder :: default/fonts.js
sass	sass:compile - sass:doc - sass:cssRebaseUrl	compile sass files with docs & rebase css url :: default/sass.js
js	js:browserify - js:copySrc	browserify & uglify js files & copy source js files to dev folder :: default/scripts.js
images	images:minify - images:favicons	minify images & generate favicons :: default/images.js
nunjucks	nunjucks:render - nunjucks:inject	render nunjucks files & inject css/js files :: default/nunjucks.js
serve	serve:prod	start server & open browser for dev or prod mode :: base/serve.js
watch	---	start gulp watch for tasks (bower - sass - nunjucks - js) :: base/watch.js
build	---	main build task for prod mode
---	build:fonts	copy fonts to prod folder :: build/fonts.js
---	build:css	rebase url/remove unused selectors/strip comments/beautify/concat/minify :: build/css.js
---	build:js	copy js files to prod folder :: build/scripts.js
---	build:images	copy images to prod folder :: build/images.js
---	build:html	copy & prettify html files and inject minified css/js files :: build/html.js

##Gulp Tasks Structure This is gulp folder structure:

• config.js file : to define tasks options
• paths.js file : to define all paths for tasks
• base folder : contain base tasks
• default folder : contain common tasks for development
• build folder : contain build tasks for production

gulp
├── config.js
├── paths.js
└── tasks
    ├── base
    │   ├── bower.js
    │   ├── clean.js
    │   ├── serve.js
    │   └── watch.js
    ├── build
    │   ├── css.js
    │   ├── fonts.js
    │   ├── html.js
    │   ├── images.js
    │   └── scripts.js
    └── default
        ├── fonts.js
        ├── images.js
        ├── nunjucks.js
        ├── sass.js
        └── scripts.js

##Folders Structure

• source folder : contain all source files
• build folder : contain dest folders dev for development & prod for production
• bower_components folder : contain all bower dependencies
• gulp folder : contain all gulp tasks files
• node_modules folder : contain all gulp dependencies
• bower.json file : define bower dependencies
• gulpfile.js file : define gulp tasks for default & build
• package.json file : define gulp dependencies

slush-kickstart
├── bower_components
│   ├── # bower dependencies
├── gulp
│   ├── # gulp tasks
├── node_modules
│   ├── # Gulp dependencies
├── build
│   ├── dev
│   │   ├── assets
│   │   │   ├── css
│   │   │   │   ├── _maps
│   │   │   │   ├── _sassdoc
│   │   │   │   ├── base
│   │   │   │   ├── vendor
│   │   │   │   └── main.css
│   │   │   ├── fonts
│   │   │   │   ├── # all fonts
│   │   │   ├── images
│   │   │   │   ├── favicons
│   │   │   │   └── logo.png
│   │   │   └── js
│   │   │       ├── src
│   │   │       ├── scripts.js
│   │   │       └── scripts.js.map
│   │   └── index.html
│   └── prod
│       ├── assets
│       │   ├── css
│       │   │   ├── maps
│       │   │   ├── style.css
│       │   │   └── style.min.css
│       │   ├── fonts
│       │   │   ├── # all fonts
│       │   ├── images
│       │   │   ├── favicons
│       │   │   └── logo.png
│       │   └── js
│       │       ├── scripts.js
│       │       └── scripts.js.map
│       └── index.html
├── source
│   ├── fonts
│   │   └── vendor
│   │   │   └── # icon fonts
│   │   ├── # main fonts
│   ├── images
│   │   └── logo.png
│   ├── js
│   │   ├── modules
│   │   │   └── module.js
│   │   ├── vendor
│   │   │   ├── # all vendors
│   │   └── main.js
│   ├── scss
│   │   ├── base
│   │   │   └── base.scss
│   │   ├── vendor
│   │   │   ├── lib
│   │   │   └── vendor.scss
│   │   └── main.scss
│   └── templates
│       ├── includes
│       │   └── foundation.nunjucks
│       │   └── bootstrap.nunjucks
│       │   └── bulma.nunjucks
│       ├── layouts
│       │   └── default.nunjucks
│       ├── macros
│       └── index.nunjucks
├── LICENSE
├── README.md
├── bower.json
├── gulpfile.js
└── package.json

##Configuration & Paths

• From gulp/config.js you can define tasks & plugins options without change anything in task file, example :

// bower task mainBowerFiles options
    mainBowerFiles: {
        // main options
        options: {
            base: 'bower_components'
        },
        // bower:css rename options
        rename: {
            suffix: "-css",
            extname: '.scss'
        },
        // watch src
        watch: ['./bower_components/**', './bower.json']
    },

• From gulp/paths.js you can define all paths for tasks, example :

// base paths
var src    = './source/',
    dist   = './build/',
    dev    = 'dev/',
    prod   = 'prod/',
    assets = 'assets/';

// nunjucks files
        nunjucks: {
            config: src + 'templates/',
            src: src + 'templates/*.{html,nunjucks}',
            watch: src + 'templates/**/*.+(html|nunjucks)'
        },

Getting To Know Slush

Slush is a tool that uses Gulp for project scaffolding.

Slush does not contain anything "out of the box", except the ability to locate installed slush generators and to run them with liftoff.

To find out more about Slush, check out the documentation.

Contributing

See the CONTRIBUTING Guidelines

Support

If you have any problem or suggestion please open an issue here.

License

The code is available under the MIT License.