README.md

Building

Installation

Do you have node?

$ node --version
v6.x.x
$ npm --version
v3.x.x

Yes, you do. Nice.

$ npm install
$ node build server

And you're good to go!

Usage

node build

Will build from source. It starts with the indexes, like "./source/index.js", and compiles together any and all dependencies (and all dependencies of those dependencies). To declare a dependency in JS, use require(), or in CSS, use @import. If an error is found in any of the sources, the build is aborted, and the error is reported. When the build is done, the files are put in the "./build/web" directory.

node build server

Will build from source and host the build at localhost:13821. The sources are compiled as detailed in node build. If, after that, any of the sources are changed, the script will automatically rebuild them, and automatically refresh the build that the server is hosting.

node build bundle

Will build from source and bundle them into executables. The executables support Windows, Mac, and Linux. The executables also include an inlined webpage, or web1, which can be run in Chrome, Firefox, Opera, and Safari.

node build --STAGE

Will build from source for a specific stage, like --development or --production. If neither is specified, the stage defaults to development. A variable named STAGE is injected into the code, which will return either PRODUCTION or DEVELOPMENT. During a production build, the sources are minified and uglified and concatenated.

Implementation

• Babel: https://babeljs.io
• Webpack: https://webpack.github.io
• BrowserSync: https://www.browsersync.io
• UglifyJS: https://github.com/mishoo/UglifyJS
• Electron: http://electron.atom.io
• ESLint: http://eslint.org

Contributing

If you want to contribute to the script, check out our gist!

build.js

// Build, Version 5.x

var fs = require("fs")
var path = require("path")
var yargs = require("yargs")
var rimraf = require("rimraf")
var ip = require("internal-ip")
var filesize = require("filesize")
var dateformat = require("dateformat")
var chalk = require("chalk")

var Webpack = require("webpack")
var BrowserSync = require("browser-sync")

var WebpackStatsPlugin = require("stats-webpack-plugin")
var WebpackExtractPlugin = require("extract-text-webpack-plugin")
var WebpackProgressBarPlugin = require("progress-bar-webpack-plugin")
var WebpackDefinePlugin = require("extended-define-webpack-plugin")

var DATE_MASK = "hh:MM:TT"

var PORT = 4444
var NAME = require("./package.json").name
var VERSION = require("./package.json").version
var STAGE = yargs.argv.production ? "PRODUCTION" : "DEVELOPMENT"
var MODE = yargs.argv._.indexOf("server") != -1 ? "SERVER" : null

var build = new Object()

rimraf("./builds/web", function() {
    Webpack({
        resolve: {
            root: [
                path.resolve("./source"),
            ],
        },
        entry: {
            "index.html": "./source/index.html",
            "index.css": "./source/index.css",
            "index.js": "./source/index.js"
        },
        output: {
            filename: "[name]",
            path: "./builds/web",
        },
        module: {
            preLoaders: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules)/i,
                    loader: "eslint-loader"
                },
                {
                    test: /\.json$/i,
                    exclude: /(node_modules)/i,
                    loader: "json-loader",
                },
            ],
            loaders: [
                {
                    test: /\.js$/i,
                    exclude: /(node_modules)/i,
                    loader: "babel-loader",
                },
                {
                    test: /\.css$/i,
                    loader: new WebpackExtractPlugin("name", "[name]").extract([
                        "css-loader", "postcss-loader",
                    ]),
                },
                {
                    test: /\.html$/i,
                    loader: new WebpackExtractPlugin("name", "[name]").extract([
                        "html-loader?interpolate"
                    ]),
                },
                {
                    test: /\.(ttf|woff|eot)$/i,
                    loader: "url-loader",
                },
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    loader: "url-loader",
                },
                {
                    test: /\.(mp3|wav|ogg)$/i,
                    loader: "url-loader"
                },
            ],
        },
        postcss: function() {
            return [
                require("precss"),
                require("autoprefixer"),
            ]
        },
        plugins: [
            new WebpackProgressBarPlugin({
                width: DATE_MASK.length,
                complete: chalk.green("O"),
                incomplete: chalk.red("0"),
                format: "[:bar] Building (:elapseds)",
                summary: false, customSummary: function() {},
            }),
            new WebpackDefinePlugin({
                NAME: NAME,
                VERSION: VERSION,
                STAGE: STAGE,
            }),
            new WebpackStatsPlugin("stats.json"),
            new WebpackExtractPlugin("name", "[name]"),
            // new Webpack.optimize.UglifyJsPlugin(),
        ],
        watch: (
            MODE == "SERVER"
        ),
    }, function(error, results) {
        results = results.toJson()

        var time = results.time / 1000 + "s"
        var size = filesize(results.assets.reduce(function(size, asset) {
            return size + asset.size
        }, 0), {spacer: ""})

        print("Building (" + time + ")(" + size + ")")

        results.errors.forEach(function(error) {console.log(error.toString())})
        results.warnings.forEach(function(warning) {console.log(warning.toString())})

        if(MODE == "SERVER") {
            if(build.server == null) {
                build.server = BrowserSync({
                    server: "./builds/web",
                    logLevel: "silent",
                    notify: false,
                    host: "localhost",
                    port: PORT
                })

                print("Listening on " + chalk.underline("http://" + "127.0.0.1" + ":" + PORT))
                print("Listening on " + chalk.underline("http://" + ip.v4() + ":" + PORT))
            } else if(build.server != null) {
                build.server.reload()
            }
        }
    })
})

function print(message) {
    var time = dateformat(new Date(), DATE_MASK)
    console.log("[" + chalk.green(time) + "]", message)
}

package.json

{
  "name": "build",
  "version": "5.0.4",
  "description": "My evolving build system.",
  "repository": {
    "type": "git",
    "url": "https://gist.github.com/ehgoodenough/29a2421b9e29e98dfc2d"
  },
  "contributors": [
    "Andrew McPherson <@ehgoodenough>"
  ],
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-core": "^6.10.4",
    "babel-eslint": "^6.0.5",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "browser-sync": "^2.13.0",
    "chalk": "^1.1.3",
    "css-loader": "^0.23.1",
    "dateformat": "^1.0.12",
    "eslint": "^2.13.1",
    "eslint-loader": "^1.3.0",
    "extended-define-webpack-plugin": "^0.1.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "filesize": "^3.3.0",
    "html-loader": "^0.4.3",
    "internal-ip": "^1.2.0",
    "json-loader": "^0.5.4",
    "postcss-loader": "^0.9.1",
    "precss": "^1.4.0",
    "progress-bar-webpack-plugin": "^1.8.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "stats-webpack-plugin": "^0.3.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "yargs": "^4.7.1"
  },
  "scripts": {
    "build": "node build"
  }
}