Vinus

Introduction

Vinus help you achieve common javascript and css tasks (compile, minify, concat or even generate rtl css styles). Vinus is an abstruction built on top of Gulp v4 so you can accomplish common Gulp tasks without any initial configuration.

Vinus helps you in:

• Compiling javascript
  • ES6 support through Babel
  • CommonJs support through Browserify
  • Typescript support
• Compiling sass and less
• Generating rtl css
• Minifying css and js
• Concat, copy and rename files

Vinus makes every things ready for you. It's fast and easy to use:

• No Gulp experience required
• No initial configuration
• No wasting time searching and configuring plugins.

Vinus API

Vinus accepts (input as) organized nodes of assets. Node types are: css, js, copy. Each node has several properties such as src and dist. You can add multiple nodes of the same type.

Vinus offer an api to build your nodes as desired by chaining calls of api functions. There are two type of functions:

• Functions that create new node. e.g. newCss() newJS()
• Functions that customize (set properties of) the last created node. e.g. src() dist().

After starting a new node, any trailing calls considered as customization for the last node as long as the call does not create a new node.

vinus
    //create new css node 1
    .newCss()
        //set node 1 source
        .src('src/css/style1.css')
        //set node 1 distination
        .dist('dist/css')
    //create new css node 2
    .newCss()
        //set node 2 source
        .src('src/css/style2.css')
        //set node 2 distination
        .dist('dist/css')
    //create new js node 3
    .newJs()
        //set node 3 source
        .src('src/js/index.js')
        //set node 3 distination
        .dist('dist/js')

Vinus API function list:

• newCss() Create new css node. Then you can customize this node using:

  • src(src) To set the source which can be one path or array paths
  • dist(dist) To set the destination. If it contains a trailing file name, then Vinus will concat source files
  • concat(name) To concat the source into one file
  • rename(name) To set the name of the output file
  • asLess() Indicate that source is Less
  • asSass() Indicate that source is Sass
  • withRtl() To generate rtl from ltr

• newJs() Create new js node. Then you can customize this node using:

  • src(src) To set the source which can be one path or array paths
  • dist(dist) To set the destination. If it contains a trailing file name, then Vinus will concat source files
  • concat(name) To concat the source into on file
  • rename(name) To set the name of the output file
  • babelify() To pass the source through Babel
  • browserify() To pass the source through Browserify
  • asTs() Indicate that source is Typescript

• newCopy() Create new copy node. Then you can customize this node using:

  • src(src) To set the source which can be one path or array paths
  • dist(dist) To set the destination. If it contains a trailing file name, then Vinus will concat source files
  • rename(name) To set the name of the output file

Alias Functions:

• css(src, dist)
  • alias for: newCss().src(src).dist(dist)
• sass(src, dist)
  • alias for: newCss().src(src).dist(dist).asSass()
• less(src, dist)
  • alias for: newCss().src(src).dist(dist).less()
• js(src, dist)
  • alias for: newJs().src(src).dist(dist)
• vue(src, dist) for VueJs
  • alias for: newJs().src(src).dist(dist).babelify().browserify()
• babel(src, dist)
  • alias for: newJs().src(src).dist(dist).babelify()
• ts(src, dist)
  • alias for: newJs().src(src).dist(dist).babelify().browserify().asTs()
• copy(src, dist)
  • alias for: newCopy().src(src).dist(dist)

Configuration Functions:

Vinus has several global options, you are free to customize them using:

• setGlobals(options) where options is an object that has the desired values. Available options are:
  • prodSuffix of type string default is '.min'
  • rtlSuffix of type string default is '.rtl'

Usage

• Install Gulp globally npm install --global gulp-cli
• Install vinus npm install vinus
• npx vinus init will generate start.js, .babelrc, tsconfig.json, gulpfile.js. Note: this command will not copy any file if it is already exist.
• Use Vinus API to build desired nodes in start.js
• gulp to compile all nodes. You can use:
  • gulp scripts to compile js nodes only
  • gulp styles to compile css nodes only
  • gulp copy to compile copy nodes only
• gulp watch to watch source files and run Gulp if any has changed
• Use --prod flag to turn on production mode. This will minify output files.

Grouping Nodes

You can organize your nodes into groups. For example you can use newGroup('backend') to create a new group of nodes that are related to admin panel. And create another one newGroup('frontend') for the frontend. Then you can choose which group to compile using --group flag. For example to compile backend only: gulp --group=backend

If no --group flag supplied, then Vinus compiles the nodes that does not belong to any group.

Use --all flag to compile all groups.

Example

vinus
    //no group
    .css([
        'src/css/nav.css',
        'src/css/charts.css',
        '...'
        ], 'dist/css/theme.css')
    .withRtl()
    .css('src/css/without-rtl.css', 'dist/css')
    .sass('sass/style.scss', 'dist/css')
    .js('src/js/')
    
    //starting new group
    .newGroup('vendors')
    .copy('node_modules/jquery/dist/jquery.min.js', 'public/vendors/jquery')
    .copy([
        'node_modules/bootstrap/dist/css/bootstrap.min.css',
        'node_modules/bootstrap/dist/js/bootstrap.min.js'
        ], 'public/vendors/bootstrap')
        
    .newGroup('vue')
    .js('src/js/vue/index.js', 'dist/js/vue/app.js')

For this example: The command gulp will compile all the nodes except those that come after vendors and vue groups. While gulp --group=vendors will compile the 2 copy nodes.

Vinus is open-sourced software licensed under the MIT license.