fangtoby / balm

BalmJS

Demo

• HTML
• Laravel
• Vue
• TypeScript

Installation

$ npm install --save-dev balm gulp

Usage

// gulpfile.js
var balm = require('balm');

balm.config = {
  // your project config
};

balm.go();

# for development
$ gulp

# for production
$ gulp --production

Config

// just for npm2
$ npm install --save-dev webpack-hot-middleware

// for ES6
$ npm install --save-dev babel-preset-es2015

// .babelrc
{
  "presets": ["es2015"]
}

// for IE8(ES3)
$ npm install --save-dev babel-preset-es2015-loose
$ npm install --save-dev babel-plugin-transform-es3-member-expression-literals
$ npm install --save-dev babel-plugin-transform-es3-property-literals

// .babelrc
{
  "presets": ["es2015-loose"],
  "plugins": [
    "transform-es3-member-expression-literals",
    "transform-es3-property-literals"
  ]
}

Project Type

{
  ...
  static: false, // set `true` for the static HTML project
  ...
}

Server

{
  ...
  proxy: undefined, // your.project.local
  server: {
    host: null,
    port: 3000
  },
  ...
}

Root

{
  ...
  roots: {
    source: 'app',  // input folder
    target: 'dist' // output folder
  },
  ...
}

Path

{
  ...
  paths: {
    source: {
      base: '',
      html: '',
      css: 'styles', // css dir
      js: 'scripts', // javascript dir
      img: 'images', // image dir
      font: 'fonts'  // font dir
    },
    target: {
      base: '',
      html: '',
      css: 'css',
      js: 'js',
      img: 'img',
      font: 'fonts'
      // cache: 'assets' // custom cache dir
    }
  },
  ...
}

Style

{
  ...
  styles: {
    autoprefixer: ['last 2 versions'],
    ext: 'scss'
  },
  ...
}

Support extension: css, less, sass, scss

Script

{
  ...
  scripts: {
    entry: {
      'main': './app/scripts/main.js'
    },
    publicPath: '/',
    filename: '[name].js',
    loaders: [], // e.g. { test: /\.vue$/, loader: 'vue' }
    extensions: [], // e.g. '.vue'
    alias: {}
  },
  ...
}

BalmJS default loaders: html, style, css, postcss, babel, url, file, json.

BalmJS default extensions: .js, .jsx, .json.

Sprite

{
  ...
  sprites: {
    basePath: '..',     // relative to css file
    cssPath: 'sprites', // css folder
    imgList: []         // image folder, e.g. 'icon'
  },
  ...
}

Cache

{
  ...
  cache: false,
  ...
}

Zip

{
  ...
  zip: 'archive', // zip filename
  ...
}

License

© Elf-mousE

thx node&gulp