De-builder NPM

de-builder

npm install --save-dev de-builder

What is it?

de-builder creates a Live Development Environment (LDE). In this environment you can write .coffee, .less and .pug and your code will be compiled on save. The corresponding part of you program will be either injected or restarted. This is achieved by using various modules.

Getting Started

Create a project folder mkdir test.
Navigate to the project folder cd test.
Create a package.json file to store all your project information. You could use npm init.
Then npm install --save-dev de-builder.
Once de-builder has been installed a build.js file will have been created.
You can adjust the config in the build.js file according to your specifications (all default options are shown but not required).
Now run node build.js and your LDE will run and you can start working on your project.

NOTE: If you've kept all default settings and started node build.js in an empty project you will encounter two error's LDE - Less and LDE - Browserify. That's because by default an entry file for less and browserify is expected. You can disable lessand browserify or create the entry files to solve the error.

Support

The following languages are supported:

.coffee
.less
.pug

The following types of LDE are supported:

Server + Client
Server
Client

You can create multiple browserify and less bundles

LDE's

Which LDE should I use? Type 1 Server + Client: If you are making a program / server with a website interface. Type 2 Server: If you are making a program / server without a website as an interface. Type 3 Client: If you are making a program / server only using the client-side bundle part

Multiple bundles

de-builder will switch to 'multiple bundle mode' if the entry file defined in the config cannot be found. In the console it will notify you which type is being used e.g.

info  LDE - Less       →  Type: single
info  LDE - Browserify →  Type: multi

In multi mode it will check all child folders of the js and/or css (.less) folder and used them as the entry points. This means that a folder in multi mode must contain an index(.coffee/.less) file.

Structure

Ok so how should I structre my project? You can use the structre described below but you are free to choose, however make sure you provide the correct entry folder and file in the build.js folder if you choose a custom structure.

Server + Client (LDE type 1)

Without the src/ folders shown in type 2 and 3

src/
	client/
		Client (LDE type 3, excluding its "src/" folder)

	server/
		Server (LDE type 2, excluding its "src/" folder)

Server (LDE type 2)

src/
	db/
		connection.coffee
		index.coffee
	email/
		handler.coffee
		index.coffee
	server/
		index.coffee
	networking/
		index.coffee
	app.coffee
	config.coffee
	manager.coffee

Client (LDE type 3)

src/
	css/
		app/
			elements/
				header.less
				main.less
			pages/
				home.less
			fonts.less
			index.less
			variables.less
		pdf/
			index.less
	fonts/
		font-file.ttf
		font-file2.ttf
	images/
		favicon.ico
		users/
			user1.png
			user2.png
	js/
		app/
			elements/
				header.coffee
			templates/
				header.pug
			index.coffee
			main.coffee
			router.coffee
		vendor/
			index.coffee

Browser-sync

Once de-builder is running the browser-sync ui can by default be found at localhost:9000. But if you run multiple instances of de-builder it will try to use 9000 + 2x instead, so running 3 instances of de-builder will have browser-sync running at 9000, 9002 and 9004. The required browser-sync code-snippet has been added to the bundle already by de-builder so browser-sync will work out of the box on all your pages and devices =D! In multi mode folder(s) are to be provided telling de-builder in which bundle(s) to add the browser-sync snippet. By default vendor is used. See config.browserSync.multi

Modules

The main modules used to create this LDE:

Config

# Default
config =

	# Source and build directory
	src   : "src"
	build : "build"

	# Client and server directory
	client: "client"
	server: "server"

	# Less directory and entry file
	less:
		file   : "app.css"
		entry  : "app.less"
		folder : "css"

	# Browserify directory and entry file
	browserify:

		# Used for single build
		single:
			entry  : "app.coffee"
			bundle : "app.bundle.js"

		# Name used for multi bundle builds
		multi : "bundle.js"

		# Show or hide source maps
		debug : true

		# Folder containing all js/coffee files
		folder : "js"

	# Server path/file to be started by forever
	forever:

		# File to start
		entry   : "app.js"

		# Use it, or not
		enabled : true

	# Use browser-sync options
	browserSync:

		# Use it, or not
		enabled : true

		# user interface port
		ui      : 9000

		# server port
		server  : 9001

		# The bundle(s) which should contain the browser-sync code
		multi   : ["vendor"]

	# LDE environments
	# 1 Server+Client
	# 2 Server
	# 3 Client
	type: 1

	# Show de-builder debug events
	debug: false

Common errors

Filewatchers

There is a limit to how may files can be watched at the same time. So if you are running dropbox, a gui for git, sublime text and de-builder it's easily possible to run out of file watchers. You can get the error: Fatal error: watch ENOSPC

Use the follwoing line to increase the allowed filewatchers on your system:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

source: http://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc

Port in use

Pay attention to which port you are using and if another process issn't already running it. If you run node build.js you may see the error: Error: listen EADDRINUSE. Check if your port is unique. If so your current application might still be running. Check with top or htop in the ternimal and terminate it.