gulp-drinkbar

Overview

gulp-drinkbar helps write gulp tasks more simple and easier to read.

gulpfile.js

var drinkbar = require('gulp-drinkbar')

drinkbar
	.task('script:app')
	.scripts({
		inputs: [
			'resources/assets/js/app.js',
		],
		config: {
		},
		output: 'public/assets/app.js',
		cleans: [
		],
	})
	.watch('resources/assets/js/**/*.js')

drinkbar
	.task('scripts', ['script:app'])
	.define()

drinkbar
	.task('default', ['scripts'])
	.define()
	.on('after', function () {
		drinkbar.notify('Build finished.')
	})

Getting Started

gulp-drinkbar requires below

Module	Version
Node.js	>= 0.12
gulp	>= 3.9

Installation

[1] Install gulp on global and local.

npm install -g gulp
npm install gulp --save-dev

[2] Install gulp-drinkbar.

npm install gulp-drinkbar --save-dev

Minimum example

[1] make gulpfile.js.

var drinkbar = require('gulp-drinkbar')

drinkbar
	.task('default')
	.define()

[2] Run command gulp.

That's All!

To check more examples please download gulp-drinkbar-examples.

Commands

gulp commands are used in gulp-drinkbar.

gulp

It runs default task

Additional sourcemap will be generated if your task includes compiling .css and/or .js file.

gulp --production

It runs default task.

It runs minify files when the task includes compiling .css file.

It runs uglify files when the task includes compiling .js file.

gulp --tasks

To show gulp tasks that you can.

gulp `<task>`

It runs specific <task>.

gulp watch

As you write code and modify your files, this command will listen for changes and automatically run designated tasks.

Task Definition

Your gulp tasks are written in gulpfile.js

gulpfile.js

var drinkbar = require('gulp-drinkbar')

drinkbar
	.task({taskname})
	.{recipe}({})

Your gulp task name is written in {task}.

You can put your functions (described in the recipe section below) in {recipe}.

If you write task by using ES2015, it needs to be written in .babelrc file. And rename the gulpfile.js to gulpfile.bable.js.

.bablerc

{
  "presets": ["es2015"]
}

gulpfile.babel.js

import drinkbar from 'gulp-drinkbar'

drinkbar
	.task({taskname})
	.{recipe}({})

Passing File Path

You can pass file paths to parameter in two ways.

To pass one file or file pattern to task, use input:.

{
	input: 'assets/test-1/a.css',
}

To pass multiple files or file patterns, use inputs:.

{
	inputs: [
		'assets/test-1/b.css',
		'assets/test-1/c.css',
	],
}

Wildcard (Glob) can be used to specify file pattern.

{
	inputs: [
		'assets/test-1/**/*.css'
	],
}

Task Group

To define task group, create new task with dependency tasks in array.

drinkbar
	.task('scripts', ['script:libs', 'script:app'])
	.define()

script:libs and script:app will run when you hit gulp scripts.

Recipes

Recipes are functions that includes gulp tasks used frequently.

Recipes include "compiling recipe" which compile selected file, "concatenating recipe" files which concatenate files into one file, and "work recipe" which doesn't generate any files.

copy

To copy file.

drinkbar
	.task('bootstrap3')
	.copy({
		inputs: [
			'resources/assets/css/bootstrap.min.css',
			'resources/assets/js/bootstrap.min.js',
		],
		output: 'public/assets',
	})
	.watch('resources/assets/**/bootstrap.*')

Recipe Type: Compiling recipe
Modules: Nothing
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])

pug (jade)

To compile pug (jade) file and generate .html file.

drinkbar
	.task('bootstrap3')
	.pug({
		inputs: [
			'src/index.jade',
		],
		output: 'public',
	})
	.watch('src/**/*.+(pug|jade)')

Recipe Type: Compiling recipe
Modules:
- [Require] gulp-pug
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: Pug configuration.
    - See: https://github.com/jamen/gulp-pug#api

stylus

To compile stylus file and generate .css file.

drinkbar
	.task('style:app')
	.stylus({
		inputs: [
			'resources/assets/app.styl',
		],
		output: 'public/assets',
	})
	.watch('src/**/*.styl')

Recipe Type: Compiling recipe
Modules:
- [Require] gulp-stylus
- [Optional] nib if use @import 'nib'
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: Stylus configuration.
    - See: https://github.com/jescalan/accord/blob/master/docs/stylus.md
  - [Optional] config.autoprefixer: Autoprefixer configuration.
    - See: https://github.com/postcss/autoprefixer#options

sass

To complie Sass file and generate css file.

Compass is not available.

drinkbar
	.task('style:app')
	.sass({
		inputs: [
			'resources/assets/sass/app.scss',
			'resources/assets/sass/lib.sass',
		],
		output: 'public/assets',
		config: {
			autoprefixer: 'last 10 versions',
		},
	})
	.watch('resources/assets/sass/**/*.+(scss|sass)')

Recipe Type: Compiling recipe
Modules:
- [Require] gulp-sass
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: Sass configuration.
    - See: https://github.com/sass/node-sass#options
  - [Optional] config.autoprefixer: Autoprefixer configuration.
    - See: https://github.com/postcss/autoprefixer#options

less

To compile less file and generate .css file

drinkbar
	.task('style:app')
	.less({
		inputs: [
			'resources/assets/less/app.less',
		],
		output: 'public/assets',
		config: {
		},
	})
	.watch('resources/assets/less/**/*.less')

Recipe Type: Compiling recipe
Modules:
- [Require] gulp-less
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: Less configuration.
    - See: https://github.com/plus3network/gulp-less#options
  - [Optional] config.autoprefixer: Autoprefixer configuration.
    - See: https://github.com/postcss/autoprefixer#options

babel

To compile bable file and generate .js file. It compile selected presets file such as ES2015 or JSX.

.babel({
		inputs: [
			'assets/test-6/a.es6',
		],
		output: 'results/test-6',
		config: [
			presets: ['es2015'],
		],
	})

.babel({
		inputs: [
			'assets/test-6/c.jsx',
		],
		output: 'results/test-6',
		config: [
			presets: ['react'],
		],
	})

Recipe Type: Compiling recipe
Modules: Nothing
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: Babel configuration.
    - See: https://babeljs.io/docs/usage/options/

coffeescript

To compile coffeescript file and generate .js file.

.coffeescript({
		inputs: [
			'assets/test-7/a.coffee',
			'assets/test-7/b.coffee',
		],
		output: 'results/test-7',
	})

Recipe Type: Compiling recipe
Modules:
- [Require] gulp-coffee
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: CoffeeScript configuration.
    - see: http://coffeescript.org/

typescript

To compile typescript file and generate .js file.

.typescript({
		inputs: [
			'assets/test-8/a.ts',
			'assets/test-8/b.ts',
		],
		output: 'results/test-8',
	})

Recipe Type: Compiling recipe
Modules:
- [Require] gulp-typescript
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: TypeScript configuration.
    - See: https://github.com/ivogabe/gulp-typescript#options

json5

To compile json5 file and generate .json file.

.json5({
		input: 'assets/test-14/config.json5',
		output: 'results/test-14',
	})

Recipe Type: Compiling recipe
Modules: Nothing
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: JSON5 configuration.

cson

To compile cson file and generate .json file.

.cson({
		input: 'assets/test-15/config.cson',
		output: 'results/test-15',
	})

Recipe Type: Compiling recipe
Modules: Nothing
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: CSON configuration.

yaml

To compile yaml file and generate .json file.

.yaml({
		input: 'assets/test-16/config.yaml',
		output: 'results/test-16',
	})

Recipe Type: Compiling recipe
Modules: Nothing
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Optional] output: output directory path. (default is '.')
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: YAML configuration.

styles

To concatenates style sheets and saves the output.

drinkbar
	.task('style:app')
	.styles({
		inputs: [
			'resources/assets/css/bootstrap.css',
			'resources/assets/css/app.css',
		],
		output: 'public/assets/app.css',
	})
	.watch('resources/assets/css/**/*.css')

Recipe Type: Concatenating recipe
Modules: Nothing
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Require] output: output file path.
  - [Optional] clean/cleans: cleanup file path(s). (default is [])

scripts

To concatenates scripts and saves the output

drinkbar
	.task('script:app')
	.scripts({
		inputs: [
			'resources/assets/js/jquery.js',
			'resources/assets/js/bootstrap.js',
			'resources/assets/js/app.js',
		],
		output: 'public/assets/app.js',
	})
	.watch('resources/assets/js/**/*.js')

Recipe Type: Concatenating recipe
Modules: Nothing
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Require] output: output file path.
  - [Optional] clean/cleans: cleanup file path(s). (default is [])

browserify

To combine scripts into one by using browserify. scripts that written by using ES2015 and JSX type can be compiled.

drinkbar
	.task('script:app')
	.browserify({
		inputs: [
			'resources/assets/js/app.js',
		],
		output: 'public/assets/app.js',
		config: {
		},
	})
	.watch('resources/assets/js/**/*.js')

Recipe Type: Concatenating recipe
Modules:
- [Require] browserify
- [Require] babelify
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Require] output: output file path.
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: Browserify configuration.
    - See: https://github.com/substack/node-browserify#browserifyfiles--opts

webpack

To combine scripts into one by using webpack. scripts that written by using ES2015 and JSX type can be compiled.

drinkbar
	.task('script:app')
	.webpack({
		inputs: [
			'resources/assets/js/app.js',
		],
		output: 'public/assets/app.js',
		config: {
		},
	})
	.watch('resources/assets/js/**/*.js')

Recipe Type: Concatenating recipe
Modules:
- [Require] webpack-stream
- [Optional] babel-loader if needs compile es2015, react(.jsx), ...
Arguments:
- [Require] 1. object
  - [Require] input/inputs: input file path(s).
  - [Require] output: output file path.
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: Webpack configuration.
    - See: https://webpack.github.io/docs/configuration.html

rollup

Build the ES2015 format of the script using the rollup, to generate a .js file in a variety of formats. The plug-in is enabled by rollup-plugin-node-resolve and rollup-plugin-commonjs. If you want to use Babel, please specify the config.plugins.

drinkbar
	.task('scripts:app')
	.rollup({
		input: 'resources/assets/js/app.js',
		output: 'public/assets/app.js',
		config: {},
	})
	.watch('resources/assets/js/**/*.js')

Recipe Type: 結合レシピ
Modules:
- [Require] gulp-drinkbar-rollup
Arguments:
- [Require] 1. object
  - [Require] input: input file path.
  - [Require] output: output file path.
  - [Optional] clean/cleans: cleanup file path(s). (default is [])
  - [Optional] config: Rollup configuration: (default: {format: 'umd', moduleName: 'main'})
    - See: https://github.com/rollup/rollup/wiki/JavaScript-API#rolluprollup-options-

clean

To erase selected files and/or directories

drinkbar
	.task('scripts:clean')
	.clean('resources/assets/app.*')

drinkbar
	.task('scripts:clean')
	.clean([
		'resources/assets/css/*.css',
		'resources/assets/js/*.js',
	])

Recipe Type: Working recipe
Modules: Nothing
Arguments:
- [Require] 1. string / array[string]: inputs file path(s).

browsersync

You can run local web server that can auto-reload the page by using browser-sync.

Put specific file pattern to watch so that the web page will auto-reloads when you save it.

drinkbar
	.task('serve')
	.browsersync({
		config: {
			server: 'public',
		},
		watch: 'public/**/*',
	})

Recipe Type: Working recipe
Modules:
- [Require] browser-sync
Arguments:
- [Require] 1. object
  - [Optional] config: BrowserSync configuration.
    - See: https://browsersync.io/docs/options
  - [Optional] watch/watches: watch file path(s). (default is [])

Methods

drinkbar.task(task : string, dependentTasks : array) : TaskBuilder

Create task builder.

Arguments

task : string : Task name.
dependentTasks : array : Dependent tasks list.

Return

TaskBuilder : Task Builder.

TaskBuilder#{recipe}(...parameters) : TaskBuilder

Create gulp task with selected recipes.

Arguments

parameters : argument array : Aruguments list.

Return

TaskBuilder : Task builder.

TaskBuilder#define(closure : function($, builder, ...parameters) = null) : TaskBuilder

Make a Gulp task with the specified logic.

Arguments

closure : function($, builder, ...parameters) : Definition function.

Return

TaskBuilder : Task builder.

TaskBuilder#on('before', callback : function) : TaskBuilder

Get event that before gulp task runs.

Arguments

callback : function() : Callback function.

Return

TaskBuilder : Task builder.

TaskBuilder#on('after', callback : function) : TaskBuilder

Get event that after gulp task runs.

Arguments

callback : function() : callback function

Return

TaskBuilder : Task builder.

TaskBuilder#watch(patterns : string|array) : TaskBuilder

Select watch file pattern by Glob and link it to gulp task.

Arguments

patterns : string|array : File pattern or file pattern array.

Return

TaskBuilder : Task builder.

drinkbar.notify(message : string, title : string) : void

Push notification to platform.

Print message to the console.

Arguments

message : string : Notification message.
title : string : Notification title.

Return

None.

drinkbar.log(message : string) : void

Print message to the console.

You can set colors by using chalk library.

Arguments

message : string : Output message.

Return

None.

Credits

Jumilla ([https://github.com/jumilla](Fumio Furukawa)) Yuuki ([https://github.com/yuki332](Yuki Arai))

MIT License.

Name		Name	Last commit message	Last commit date
Latest commit History 50 Commits
src		src
test		test
.babelrc		.babelrc
.gitignore		.gitignore
README-ja.md		README-ja.md
README.md		README.md
package.json		package.json

jumilla/gulp-drinkbar

Folders and files

Latest commit

History

Repository files navigation

gulp-drinkbar

Overview

gulpfile.js

Getting Started

Installation

Minimum example

Commands

gulp

gulp --production

gulp --tasks

gulp <task>

gulp watch

Task Definition

gulpfile.js

.bablerc

gulpfile.babel.js

Passing File Path

Task Group

Recipes

copy

pug (jade)

stylus

sass

less

babel

coffeescript

typescript

json5

cson

yaml

styles

scripts

browserify

webpack

rollup

clean

browsersync

Methods

drinkbar.task(task : string, dependentTasks : array) : TaskBuilder

Arguments

Return

TaskBuilder#{recipe}(...parameters) : TaskBuilder

Arguments

Return

TaskBuilder#define(closure : function($, builder, ...parameters) = null) : TaskBuilder

Arguments

Return

TaskBuilder#on('before', callback : function) : TaskBuilder

Arguments

Return

TaskBuilder#on('after', callback : function) : TaskBuilder

Arguments

Return

TaskBuilder#watch(patterns : string|array) : TaskBuilder

Arguments

Return

drinkbar.notify(message : string, title : string) : void

Arguments

Return

drinkbar.log(message : string) : void

Arguments

Return

Credits

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Languages

gulp `<task>`

Packages