[Gulp] Smart Builder
Stop search for better gulp plugins and update their versions in every project! Turn on best practicies in a few lines with Smart Builder. Do it as short as it possible. But use custom logic where you really need it.
Overview
Smart Builder is configuration wrapper for gulp which provide easy declarative configuration based on best practices. Configure your favorite build environment (PostCSS, template engines, webpack, Browserify, babel, etc) just in 3 minutes.
Table of Content
Features
Not described yet.
Installation
Just install to your project through npm:
npm install smart-builder --save-dev
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
;;; const builder = 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: images: true styles: true templates: 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' ; builder;
Configuration
It's a good practice to store your configuration in external file (like webpack.config.js
):
smart-builder.config.js
; const config = images: // Process only changed files (with compare to destination directory) // implemented by gulp-changed plugin changed: true styles: changed: true swf: true templates: changed: true webpack: // Start only when this assets has been processed dependencies: 'images' 'styles' 'swf' 'templates' // Connect external webpack config 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 environmentif processenvNODE_ENV === 'production'
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
TODO
- Middleware
- Look at Ember CLI and LinemanJS for inspiration and to get useful solutions. Thanks to Andrey Listochkin.