CASE

Markup builder on gulp without jokes

Why?

• Cause it's just simple. You have to change only gulpfile.js to control your build process.
• You don't need to change more. It works out of the box.
• Own sequencer let you process tasks in correct order even with errors.
• Watcher continue works with thrown errors. And you still have the ability to use CI for testing.
• You have the ability to customize source and destination directories any time. Just edit caseconf.json.

Installation

$ git clone --depth 1 https://github.com/TrySound/case.git PROJECT_DIR
$ cd PROJECT_DIR
$ rm -r .git
$ npm i

Usage

Initialize your project with

$ gulp init

You will be asked where you want to contain source files and where they will be copied to.

Then start the server and watch your sources

$ gulp dev

caseconf.json

app

Type: string Default: app

Source files directory.

assets

Type: string Default: public

Destination for js, css and img.

markup

Type: boolean, string Default: true

Destination for markup and directory for server. If true then will be used assets path.

server

Type: boolean Default: true

Enables local server, markup:false also disables this feature.

port

Type: number{2,5} Default: 8080

Local server port like localhost:8080.

Commands

# Creates file structure
$ gulp init

# Creates files if they don't exist, but doesn't add templates. Uses default conf.
$ gulp init-safe

# Starts server
$ gulp server --open

# Builds public
$ gulp build --min --lint --clean

# Builds public, starts server and watches for changes
$ gulp dev --min --lint --clean --open

# Partials
$ gulp script --min --lint
$ gulp style --min --lint
$ gulp markup
$ gulp image

Flags

• --min, -m cssnano for style and uglify for script
• --lint, -l stylelint for style and eslint for script
• --open, -o open site in browser. Works only with enabled server. See opn
• --clean clears dst directory before build

Workflow

Markup

Used nunjucks templater.

Style

Used postcss modular processor with plugins

• stylelint
• postcss-import
• postcss-nested
• postcss-inline-svg
• postcss-clearfix
• postcss-pseudo-class-enter
• autoprefixer
• cssnano
• postcss-reporter

You can add any other plugin, just npm install PLUGIN_NAME -D and require it to processor list of style task

postcss([
	require('precss')
])

Script

Used rollup es2015-modules bundler with plugins

• rollup-plugin-node-resolve
• rollup-plugin-commonjs
• rollup-plugin-eslint
• rollup-plugin-uglify

rollup({
	plugins: [
		require('rollup-plugin-babel')()
	]
})

MIT © Bogdan Chadkin