开源软件名称(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
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
- Install front-end/bower dependencies
- 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']
},
// 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.
|
请发表评论