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.
- Clone Jupiter.
- Navigate to the root directory and run
- Install sass (ruby) globally (usually this can be done with
sudo npm install -g sass
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
While watching, when you save a file, it will run two commands for each type of file change (
.js). These are described below.
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.
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 uglifyto minify the
grunt sassto compile the SCSS files into
grunt postcssto add accessibility and browser compatibility rules to
Update to commands
In version 2.0, you can now use the following commands as a shortcut to the above:
(You can use
grunt sass && grunt postcss && grunt concat
grunt browserify && grunt uglify