Integration
You can install Substance via npm and use it with a build tool of your choice.
npm install substance
Let's assume the following project structure.
app - application setup (html, css, js)
lib - reusable library code of your editor
node_modules - dependencies such as substance and font-awesome
Bundling
Now we want to create a distribution (bundle), that combines all those source files into dist folder that can be hosted on a webserver.
dist/index.html - HTML page
dist/app.css - bundled CSS
dist/app.js - bundled Javascript code
dist/substance/*
dist/font-awesome/*
Your index.html
file should look like this:
<script type="text/javascript" src="./substance/substance.js"/></script>
<script type="text/javascript" src="./app.js"></script>
<link rel="stylesheet" type="text/css" href="./app.css"/>
Using Substance Bundler
Substance Bundler is a lightweight build tool for Javascript.
npm install substance-bundler
Now you need to write a simple build script (make.js
) that does the actual work.
var b = require('substance-bundler')
b.task('clean', function() {
b.rm('./dist')
})
b.task('assets', function() {
b.copy('lib/**/*.css', './dist/')
b.copy('node_modules/font-awesome', './dist/font-awesome')
})
// this optional task makes it easier to work on Substance core
b.task('substance', function() {
b.make('substance', 'clean', 'css', 'browser')
b.copy('node_modules/substance/dist', './dist/substance')
})
b.task('build', ['clean', 'substance', 'assets'], function() {
b.copy('app/index.html', './dist/index.html')
b.copy('app/app.css', './dist/app.css')
b.js('app/app.js', {
external: ['substance'],
commonjs: { include: ['node_modules/lodash/**'] },
dest: './dist/app.js',
format: 'umd',
moduleName: 'app'
})
})
b.task('default', ['build'])
// starts a server when CLI argument '-s' is set
b.setServerPort(5555)
b.serve({
static: true, route: '/', folder: 'dist'
})
And now run:
node make
Please you want to look at a complete project setup, just clone and run SimpleWriter.
Using Browserify and Babel
This does the same job, for bundling the Javascript.
npm install -g browserify
npm install babel-preset-es2015 babelify
browserify app/app.js -t babelify -o app.js
Other tools
You are free to use other build tools, such as Webpack or Gulp. Please consult the websites of those projects for usage documentation.