BalmJS

A flexible Front-End workflow

☕ Installation


npm install -g balm-cli
balm list
balm init <template-name> <project-name>

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

# For development
npm run dev

# For production
npm run prod

cd /path/to/your_local_project
yarn add -D gulp balm
# OR `npm install -D 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
  },
  paths: {
    source: {
      css: 'styles', //   CSS dir: ./app/styles
      js: 'scripts', //    JS dir: ./app/scripts
      img: 'images', // Image dir: ./app/images
    }
  },
  styles: {
    ext: 'scss' // Main style extension
  },
  scripts: {
    entry: {
      main: './app/scripts/main.js' // The entry script
    }
  },
  assets: {
    root: '/path/to/your_remote_project', // Remote project root path
    publicPath: 'public' // '/path/to/your_remote_project/public'
  }
};

balm.go(function(mix){
  if (balm.config.production) {
    // Publish assets(styles, scripts, images, fonts)
    // to `${assets.root}/${assets.publicPath}`
    mix.publish();

    // Publish `${roots.source}/index.html`
    // to `${assets.root}/public`
    mix.publish('index.html', 'public');
  }
});


var balm = require('balm');

balm.config = {
  server: {
    open: true,
    proxyTable: {
      '/api': {
        target: 'http://your.project.dev', // Target host
        changeOrigin: true // Needed for virtual hosted sites
      }
    }
  },
  roots: {
    source: 'app' // Source code root
  },
  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: ['last 2 versions']
  },
  scripts: {
    entry: {
      // HTML: <script src="/js/vendor/mylib.js"></script>
      mylib: [
        'your-project-vendors',
        'your-project-plugins'
      ],
      // The entry script
      // HTML: <script src="/js/main.js"></script>
      main: './app/scripts/main.js'
    }
  },
  sprites: {
    image: ['img-icon'] // Icon path: './app/images/img-icon'
  },
  cache: false,
  assets: {
    root: '/path/to/your_remote_project', // Remote project root path
    publicPath: 'public', // '/path/to/your_remote_project/public'
    subDir: '' // `/path/to/your_remote_project/public/${subDir}`
  }
};

balm.go(function(mix){
  if (balm.config.production) {
    // Publish assets(styles, scripts, images, fonts)
    // to `${assets.root}/${assets.publicPath}/${assets.subDir}`
    mix.publish();

    // Publish `${roots.source}/index.html`
    // to `${assets.root}/views`
    mix.publish('index.html', 'views', {
      basename: 'yourFilename',
      suffix: '.blade',
      extname: '.php'
    });
  }
});