A collection of shared UI utilities and libraries leveraged by AI2 when developing interfaces.
Specifically, syrup provides:
- A series of gulp tasks for building a single-page client-side application.
- A collection of less styles. To see them in action, visit the demo.
- nodejs >= 0.12.7 is required.
Install via npm:
npm install syrup
Syrup includes a series of gulp tasks useful for building a single-page client-side application.
The gulp tasks provided by syrup can be initialized like so in your
// gulpfile.jsvar gulp = ;var syrup = ;syrupgulp;
A build can then be triggered from the terminal:
Watch your project for changes dynamically and start a static HTTP server for previewing the result:
To include the all of the less styles provide by syrup, simply add the following line to your less stylesheet:
Syrup provides the following tasks:
- Removes all build artifacts
- Compiles and minifies LESS files to CSS files.
- Lints JS files using jshint.
- Bundles, minifies and obfuscates
jsfiles using browserify into a single, bundled script. Uses babel to provide support for ECMA6 features and ReactJS.
- Copies all assets into the build directory.
- Copies the
index.htmlfile into the build directory after running the
- Builds the project by running the
- Watches the project for changes and rebuilds the affected components as they occur.
- Runs an express HTTP serving serving the application.
- Runs the
The following project structure is expected by default, but can be changed via the
// the location of your application's index.html filehtml: 'app/index.html'// the less files which will be watched for changesallLess: 'app/**/*.less'// the less entry-pointless: 'app/main.less'// all js files to be linted using eslintjsLint: 'app/**/*.js'// the js entry-pointjs: 'app/app.js'// static assets (images, fonts, etc)assets: 'app/assets/**/*'// the location of build outputbuild: 'build'