gbs

1.0.9 • Public • Published

GBS (Gulp Build System)

What is GBS ?

Build system based on Gulp and Browserify, for isomorphic applications. GBS created as simple module for my projects. In current version, it support:

  • Transpile ES6, ES7, JSX to ES5
  • Transpile less to css
  • Create client bundles
  • Uglify client bundles
  • Find node_modules and create logs of requires, to analyze dependencies
  • Move all required node_modules in separate bundle
  • Detect eslint errors configured in .eslintrc

What NOT SUPPORT in current time, but can be included later: real time file watch.

Why not just use Webpack ?

Webpack is great! It almost ideal build system for client bundles, but when You want work with some more complicated things like isomorphic applications... Webpack has to many configs Gulp instead allow you to write pure JavaScript code, without learn hundreds configs. And couple more advantages:

  • Isomorphic - Include in bundle only client files, separate them by local package.json, and don't create server bundle, leaving project directories structure untouched. It helpful for debug and build optimizations.
  • Optimization - Transpile only changed files; Eslint check only changed files or files with errors in previous check; Separate node_modules in different bundle, wich updated only after npm install; Support build maty client bundles with diffrent entrys and common lib bundle...
  • Speed - Thanks to optimizations, build change only necessary part of application, reducing the necessary time.
  • Single useful Gulp functions - You can import just couple functions from GBS and use them in Your Gulp tasks.

How to use GBS ?

A detailed example of usage GBS you can see in gbs-example-project

Install

$ npm install --save-dev gulp gbs

Create gulpfile.js and add tasks to package.json

In root diectory of application create gulpfile.js or copy and rename exampleGulpfile.js from GBS

"scripts": {
    "buildLib": "gulp buildLib",
    "start": "gulp",
    "run": "node lib/server",
    "buildAndRun": "gulp buildLibAndBundles && node lib/server",
    "poststart": "node lib/server",
    "postinstall": "gulp buildLib"
  },

Run tasks

$ npm run buildLibAndStart

GBS Documentation

Init configs

Config key Type Default Description Example
srcDir string Directory which contains JS files with ES6, ES7, JSX 'src'
libDir string In this directory will placed transpiled in to ES5 JS files 'lib'
entryPointsFiles string By using this pattern GBS will be looking files which are entry points for client bundles '/lib/*/client.js'
bundlesDir string In this directory will be created client bundles 'lib/static/js'
libsBundleFileName string 'libs.js' File name for client bundle with node_modules 'libs.js'
lessEntryPointsFiles string By using this pattern GBS will be looking files which are entry points for css files '/src/static/css/*.less'
cssDir string In this directory will placed compiled css files 'lib/static/css'
logDir string In this directory will be created log files 'logs/build'
uglifyBundles boolean, string, array of strings false Set names of client bundles which need uglify ['public.js']
uglifyLibBundle boolean false Need uglify client libs bundle? true
modulesShim object {} Configure modules which will be included as separate JavaScript files in HTML. Such as: jQuery, React... More details in browserify-global-shim {'react': 'React'}
modulesDontMoveToLibBundle array of strings [] List of node_modules names which will be leave in client bundles and don't included to libs bundle. ['lodash']
delOldFoldersIgnoreRegExp RegExp regexp for 'static' dir Regular expression which shows what files and dirs need to leave in libDir, even they are missing in srcDir
modulesFileName string 'modules.json' Name for log file which contains list of all required node_modules on client side
modulesRequiredInfoFileName string 'modulesRequiredBy.json' Name for log file which contains detailed information about what client files in srcDir require node_modules
eslintDetectErrorsFileName string 'eslintDetectErrorsLog.json' Name for log file which will contain eslint errors

Gulp Tasks available after init

Task name Description
buildSrc Transpile JavaScript files with ES6, ES7, JSX syntax from srcDir and put them in lidDir as ES5
buildCss Transpile less files from lessEntryPointsFiles and put them in cssDir as css
eslintDetectErrors Find eslint errors in srcDir, fix uncritical warnings and create eslintDetectErrorsFileName log file in logDir
findUsedModules Find required node_modules in files entryPointsFiles and create 2 log file in logDir
buildLib Run buildSrc, findUsedModules then create bundle with needed on client node_modules libsBundleFileName in bundlesDir. Bundle can be uglify if set uglifyLibBundle
prepare Delete all files and dirs from libDir if they don't exist in srcDir. Run eslintDetectErrors, buildSrc, buildCss
build Run prepare and create client bundles using entry points which match entryPointsFiles and put them in bundlesDir. To uglify them, set bundles names in uglifyBundles. If You want create only some of bundles, add process arguments with their names: gulp createBundles -- --name1 --name2
buildLibAndBundles Run buildLib, build

Single functions for Gulp

Example of usage:

'use strict';
const gulpFunctions = require('gbs');
gulp.task('buildSrc', gulpFunctions.buildSrc(
    'someDir/dirWithSrcFiles',
    'someDir/dirForLibFiles'
));
buildSrc (srcDir, libDir)

Transpile JavaScript files with ES6, ES7, JSX syntax from srcDir and put them in lidDir as ES5

buildCss (lessEntryPointsFiles, cssDir)

Transpile less files from lessEntryPointsFiles and put them in cssDir as css

delOldFolders (srcDir, libDir, delOldFoldersIgnoreRegExp)

Delete all files and dirs from libDir if they don't exist in srcDir. To prevent deleting some of them, use delOldFoldersIgnoreRegExp

createBundles (entryPointsFiles, bundlesDir, modulesFilePath)

modulesFilePath: logDir + modulesFileName Create client bundles using entry points which match entryPointsFiles and put them in bundlesDir. If You want create only some of bundles, add process arguments with their names: gulp createBundles -- --name1 --name2

eslintDetectErrors (srcDir, libDir, eslintDetectErrorsFilePath)

eslintDetectErrorsFilePath: logDir + eslintDetectErrorsFileName Find eslint errors in srcDir, fix uncritical warnings and create eslintDetectErrorsFileName log file in logDir

createLibBundle (bundlesDir, libsBundleFileName, modulesFilePath, modulesShim)

libsBundleFileName: bundlesDir + libsBundleFileName modulesFilePath: logDir + modulesFileName Create bundle libsBundleFileName in bundlesDir with needed on client node_modules set in file modulesFilePath. And create modulesShim for outside libraries.

uglifyBundles (bundlesDir, uglifyBundles, ignoreBundles)

Uglify bundles in bundlesDir with names set in uglifyBundles array and ignore names from ignoreBundles. Set uglifyBundles as true to uglify all files.

findUsedModules (entryPointsFiles, logDir, modulesFileName, modulesRequiredInfoFileName, modulesDontMoveToLibBundle)

Find required node_modules in files entryPointsFiles and create 2 log file in logDir with names modulesFileName, modulesRequiredInfoFileName. You can set names of node_modules wich will be leave in client bundles and don't included to libs bundle, set modulesDontMoveToLibBundle array.

Package Sidebar

Install

npm i gbs

Weekly Downloads

142

Version

1.0.9

License

MIT

Last publish

Collaborators

  • userbug