3 Developing: 1. Getting Started
athena edited this page 5 months ago

Getting started

Jupiter is meant to be extended. In the next file, you'll read about adding extensions to Jupiter.

By default, you can't access any of Jupiter's functions from other scripts on your page. This is because Browserify compiles everything into a single function, preventing access (since we use function expressions).

Obviously, there are ways to get around this. We have chosen to restrict our functions in favor of adding extentions, for better code structure.

Setting up your environment

There are just a few things you need to do to effectively modify Jupiter.

  1. Clone Jupiter.
  2. Navigate to the root directory and run yarn install.
  3. Install sass (ruby) globally (usually this can be done with sudo npm install -g sass

Compilation commands

Once you've done that, you can now start developing Jupiter.

Jupiter uses Grunt to process and compile its source files. This process is extremely efficient. There are just a few Grunt commands you need to know to develop with Jupiter.

To start, we've setup Gruntfile.js to automatically compile all source files for you. When you run grunt watch, Grunt will watch the SCSS and JavaScript files for changes and compile them automatically.

While watching, when you save a file, it will run two commands for each type of file change (.scss or .js). These are described below.

JavaScript files

When you modify a JavaScript file, Grunt will first run grunt browserify. Browserify is a program that takes JavaScript files using the CommonJS pattern and compiles them into a browser-compatible file. This means you can use NodeJS patterns like the require() function to import local (or NPM) files. You can view the src/js/main.js file for a more explicit explanation.

The next command Grunt will run after browserify is grunt uglify. This will strip and minify the bundled file for production.

SCSS Files

When you modify an SCSS file, Grunt will first run grunt sass. This will compile all the SCSS files into a single file.

When that's done, Grunt will run grunt postcss. This will replace and add some CSS rules to make sure your style code is as cross-browser compatible as possible.

All of the above will happen automatically when you run grunt watch. If you prefer to run these commands individually, you can see the list below:

  • grunt browserify to compile the source JavaScript files into dist/jupiterui.build.js
  • grunt uglify to minify the dist/jui-bundled.js file into dist/jupiterui.js
  • grunt sass to compile the SCSS files into dist/jupiterui.css
  • grunt postcss to add accessibility and browser compatibility rules to dist/jupiterui.css

Update to commands

In version 2.0, you can now use the following commands as a shortcut to the above:

(You can use yarn or npm)

  • yarn w = grunt watch
  • yarn css = grunt sass && grunt postcss && grunt concat
  • yarn js = grunt browserify && grunt uglify

Next: Developing: 2. Extensions