Saucer is an opinionated template project for coffee/javascript development. It gets you up and running with the following tools:
- coffeescript for awesomeness
- grunt for the task-based build system
- npm for installing other packages
- jasmine for tests
- jasmine-runner for the commandline (with phantomjs)
- jasmine-spec-server for the webserver
- closure compiler for dependencies and minification
and the frontend libs:
- jquery for dom manipulation
- underscore for awesome utilities
- backbone for awesome mvc apps
- bootstrap for awesome style
(if you don't need any of these, you can just delete them).
git clone https://github.com/jbenet/saucer.git my-project
cd my-project
-
node and npm or in osx:
brew install nodejs -
phantomjs or in osx:
brew install phantomjs -
closure compiler or in osx:
brew install closure-compiler
Move (or create a symlink to) the closure compiler jar to
lib/closure/compiler.jar. For example, in osx:
% mv ~/Downloads/compiler-latest/compiler.jar lib/closure/.
or
% ln -s /usr/local/Cellar/closure-compiler/20120917/libexec/build/compiler.jar lib/closure/.
Initialize google closure-tools submodule:
% git submodule init
% git submodule update
% npm install
Saucer organizes the code thus:
├── Gruntfile.coffee - the grunt task file
├── README.md - this file
├── build - the build directory, for compiled code
├── coffee - coffeescript code
│ ├── src - coffeescript source files
│ └── test - coffeescript test files
├── js - javascript code (generated from coffee/)
│ ├── deps.js - generated dependencies file (closure)
│ ├── src - javascript source files
│ └── test - javascript test files
├── lib - libraries
│ ├── bootstrap - bootstrap js/css library
│ └── closure - closure library + compiler
├── node_modules - npm installed modules
└── package.json - package info
Available tasks (ignore others):
coffee Compile CoffeeScript files (coffee/ to js/)
deps Generates file dependencies (js/deps.js)
test Runs jasmine tests in the commandline.
testserver Runs jasmine tests in a webserver.
compile Closure compiles the source (js/src/).
default Alias for "compile" task.
watch Watches coffee/ and re-runs "deps"
clean Clear files and folders (js/, build/)
Common workflow:
- write code in
coffee/src/ - write corresponding tests in
coffee/test/ - test with
grunt --config Gruntfile.coffee test - test with
grunt --config Gruntfile.coffee testserver - compile code with
grunt --config Gruntfile.coffee compile
Write your jasmine specs in the test part of the source tree. Your test directory should mirror your src directory, with every filename.{coffee,js} having a corresponding filename.spec.{coffee,js}. This one-to-one test to src correspondence:
- makes sure you do write a
testfile for everysrcfile. - easily identifies and properly scopes spec files, for simpler debugging.
For example, in coffeescript:
coffee
├── src
│ ├── hello.coffee
│ └── main.coffee
└── test
├── hello.spec.coffee
└── main.spec.coffee
And in javascript:
js
├── deps.js
├── src
│ ├── hello.js
│ └── main.js
└── test
├── hello.spec.js
└── main.spec.js
You can run the tests from the commandline (using phantomjs):
grunt --config Gruntfile.coffee test
You can run the tests from the commandline (using phantomjs):
grunt --config Gruntfile.coffee testserver
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent