开源软件名称（OpenSource Name）：

mohamdio/gulp-workflow

开源软件地址(OpenSource Url)：

https://github.com/mohamdio/gulp-workflow

开源编程语言(OpenSource Language)：

JavaScript 100.0%

开源软件介绍(OpenSource Introduction)：

Gulp workflow

An organized front-end workflow for your next project using gulp.

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

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

Getting Started

Install Node.js
Install Gulp & bower globally

npm install -g gulp bower

In terminal/command line, cd into your project directory
Clone this workflow

git clone https://github.com/mohamdio/gulp-workflow.git .

Clone source folder structure

git clone https://github.com/mohamdio/gulp-source-structure.git source

Install Gulp dependencies

npm install

Install front-end/bower dependencies

bower install

After all done installing, you can run 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

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

gulp-workflow
├── 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
│   │       └── # all vendor 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
│       ├── 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)'
        },