Gulp Smart Builder

Stop writing big gulpfile for every project! Stop thinking about gulp plugins and dependencies! Turn on best practicies in your gulpfile in a few lines with Gulp Smart Builder.

Overview

Gulp Smart Builder is configuration wrapper for gulp which provide plugins managements is more clear and change aspect from 'which micro-steps and what order should be applied for assets' to 'which assets should be processed and what features should applied to it'.

Table of Content

• Features
• Quick Start
• Configuration
• Troubleshooting

Quick Start

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "src/server.js",
  "directories": {
    "source": "src",
    "destination": "dist",
    "public": "dist/assets"
  }
}

gulpfile.babel.js

import gulp from 'gulp';
import packageConfig from './package.json';
import buildConfig from './build.config';
import SmartBuilder from 'gulp-smart-builder';

const builder = new SmartBuilder({
  root: __dirname,
  gulp: gulp,
  // `directories` contains keys "source", "destination" and "public"
  // which present a relative path according root of your project
  directories: packageConfig['directories'],
  // `config` should contain a map with asset (plugin name) as a key  
  // and options for this plugin as a value, see build.config.js
  config: buildConfig
});
builder.run();

build.config.js

import objectAssignDeep from 'object-assign-deep';
let config = {
  images: {
    changed: true
  },
  styles: {
    changed: true
  },
  swf: true,
  templates: {
    changed: true
  },
  webpack: {
    dependencies: ['images', 'styles', 'swf', 'templates'],
    configFile: './webpack.config.js',
    entry: {
      'index': './app-client.js',
      'server': {
        target: 'node',
        file: './app-server.js'
      }
    },
    publicPath: '/assets',
    sourceMaps: 'inline',
    devServer: {
      hotModuleReplacement: true,
      reactHotLoader: true,
      host: 'localhost',
      port: 3000
    },
    extractCSSToFile: false,
    longTermCaching: false,
    generateHTML: {
      template: './templates/pages/index.html',
      inject: true
    },
    bowerComponents: true
  }
};

// Override configuration settings for PRODUCTION environment
if (process.env.NODE_ENV === 'production') {
  objectAssignDeep(config, {
    images: {
      changed: false,
      imagemin: true
    },
    styles: {
      changed: false,
      minify: true,
      sourceMaps: 'external'
    },
    templates: {
      changed: false,
      htmlmin: true
    },
    webpack: {
      uglify: true,
      sourceMaps: 'external',
      generateHTML: {
        minify: true
      }
  });
}

export default config;

Configuration

Not described yet.

Troubleshooting

Watch mode with webpack-dev-server on MacOS X running with high CPU usage

Try to install fs-events module:

npm install fs-events