Skip to content

stefan22/workflow-folder

Repository files navigation

Web Workflow (lighter new & improved!)

Overview:

Takes care of processing Sass, combining scripts and loading frameworks like Bootstrap, JQuery and Angular with
Grunt.js using npm and bower. Sass, Compass and Susy using bundle(ruby).

Links to resources:


📦 Plugins Included:
grunt-contrib-concat, grunt-contrib-connect, grunt-contrib-uglify, grunt-open,
grunt-contrib-watch, grunt-contrib-compass, grunt-watch, grunt-connect with livereload matchdep, grunt-contrib-compass, grunt-cache-breaker, grunt-contrib-clean

workflow-folder screenshot


## 1️⃣ Public/builds folder

1.1 public/['js'][sass]/, index.html => files to be process
1.2 public/builds/ => files processed
1.3 node_modules,bower_components (normally .ignore)


## 2️⃣ Sass ( using bundler)

1.1 create a Gemfile with:

             source 'https://rubygems.org'                           
             gem 'sass'
             gem 'compass'
             gem 'susy'

1.2 create config.rb

            require 'susy'

            css_dir = '/public/builds/css'
            sass_dir = '/public/sass'
            javascript_dir = '/public/js'
            output_style = :expanded

1.3 create Gemfile

             source 'https://rubygems.org'
             gem 'sass'
             gem 'compass'
             gem 'susy'

1.4 type $ gem install bundler bundle install

1.5 type npm install & bower install


3️⃣ Grunt

3.1 run each command individually.
▫️ Ex. grunt watch or grunt uglify

3.2 run them all with default task.
▫️ Ex. grunt
▫️ view: http://localhost:9001



## 4️⃣ Installation:

4.1 Download or clone this repository to a directory:
▫️ Mac or Windows: workflow-folder

4.2 Install dependencies


[:top:](https://github.com/stefan22/workflow-folder/blob/master/README.md)