frontend.conf

# A modd.conf for front-end development using React, Browserify, Babel, and
# ESLint. Livereload and HTTP serving is managed by devd.

@bin = ./node_modules/.bin
@dst = ./build

# Rebuild the vendor package when package.json changes. The ./scripts/vendor
# tool is a tiny helper that lists the packages from package.json dependencies.
package.json {
    prep: @bin/browserify \
        --debug \
        `./scripts/vendor '-r '` \
        -o @dst/static/vendor.js
}

# Whenever a Javascript source file changes, we run eslint, compile with babel,
# and then create a package with browserify. Note that babel renders to a cache
# directory - combined with the @mods variable, this means that we only compile
# what's changed at every point.
src/**/*.js {
    prep: @bin/eslint @mods
    prep: @bin/babel -s inline -d .cache @mods
    # Browserify renders from the babel destination cache, not the original
    # source.
    prep: @bin/browserify --debug \
        `./scripts/vendor '-x '` \
        .cache/src/js/app.react.js \
        -o @dst/static/app.js
}

src/css/app* {
    prep: @bin/lessc ./src/css/app.less @dst/static/app.css
}

src/css/vendor* {
    prep: @bin/lessc ./src/css/vendor.less @dst/static/vendor.css
}

src/examples {
    prep: cp -r ./src/examples @dst
}

src/index.html {
    prep: cp ./src/index.html @dst
}

# Whenever anything in the build directory changes, devd gets a signal that
# triggers livereload.
build/** {
    daemon: devd -om @dst
}