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

Usage no npm install needed!

<script type="module">
  import slushKickstart from 'https://cdn.skypack.dev/slush-kickstart';
</script>

README

Slush Kickstart Travis npm npm

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

slush kickstart

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

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.

Bitdeli Badge