BalmJS

A flexible Front-End workflow

️⚡ Installation


npm install --global balm-cli
# See all available official templates
balm list

balm init <template-name> <project-name>
cd <project-name>
yarn
# OR `npm install`

# For development
npm run dev

# For production
npm run prod


cd /path/to/workspace

mkdir my-project && cd my-project
yarn add --dev gulp balm
# OR `npm install --save-dev gulp balm`

# Config balm
touch gulpfile.js

# For development
gulp

# For production
gulp --production

⚙ Configuration

gulpfile.js

var balm = require('balm');

balm.config = {
  roots: {
    source: 'app' // Source code root (Create a directory in project)
  },
  paths: {
    source: {
      css: 'styles', // CSS dir: ./app/styles
      js: 'scripts', //  JS dir: ./app/scripts
    }
  },
  styles: {
    ext: 'scss' // Main style extension
  },
  scripts: {
    entry: {
      main: './app/scripts/main.js' // The entry script (Create a javascript file)
    }
  },
  assets: {
    root: '/path/to/your_remote_project', // Remote project root path
    publicPath: 'public' // Remote assets dir: '/path/to/your_remote_project/public'
  }
};

balm.go(function(mix){
  if (balm.config.production) {
    // Publish assets(styles,scripts,images,fonts,media)
    // from local `${roots.target}/{css,js,img,font,media}`
    // to remote `${assets.root}/${assets.publicPath}`
    mix.publish();

    // Publish html templates
    // from local `${roots.target}/index.html`
    // to remote `${assets.root}/public/index.html`
    mix.publish('index.html', 'public');
  }
});


var balm = require('balm');

balm.config = {
  server: {
    open: true,
    proxyContext: '/api',
    proxyOptions: {
      target: 'http://your.project.dev', // Target host
      changeOrigin: true // Needed for virtual hosted sites
    }
  },
  roots: {
    source: 'app' // Source code root (Create a directory in project)
  },
  paths: {
    source: {
      css: 'styles', //   CSS dir: ./app/styles
      js: 'scripts', //    JS dir: ./app/scripts
      img: 'images', // Image dir: ./app/images
      font: 'fonts'  //  Font dir: ./app/fonts
    }
  },
  styles: {
    ext: 'scss', // Main style extension
    autoprefixer: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead']
  },
  scripts: {
    entry: {
      // Custom vendors
      // HTML: <script src="%PUBLIC_URL%/scripts/vendor/mylib.js"></script>
      mylib: [
        'your-project-vendors',
        'your-project-plugins'
      ],
      // The entry script (Create a javascript file)
      main: './app/scripts/main.js'
    }
  },
  sprites: {
    image: ['img-icon'] // Icon path: './app/images/img-icon'
  },
  assets: {
    root: '/path/to/your_remote_project', // Remote project root path
    publicPath: 'public', // Remote assets dir: '/path/to/your_remote_project/public'
    subDir: '' // Remote assets subdir: `/path/to/your_remote_project/public/${subDir}`
  },
  cache: true
};

balm.go(function(mix){
  if (balm.config.production) {
    // Publish assets(styles,scripts,images,fonts,media)
    // from local `${roots.target}/{css,js,img,font,media}`
    // to `${assets.root}/${assets.publicPath}/${assets.subDir}`
    mix.publish();

    // Publish html templates
    // from local `${roots.target}/index.html`
    // to remote `${assets.root}/views/new-filename.blade.php`
    mix.publish('index.html', 'views', {
      basename: 'new-filename',
      suffix: '.blade',
      extname: '.php'
    });
  }
});