Skip to content

vquach718/gulp-workflow

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

##Gulp workflow Build Status 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

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 .
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)'
        },

##License The code is available under the MIT License.

About

Gulp workflow for front-end development

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%