This is a small JavaScript library that simulates a Keynote or PowerPoint presentation. I wrote a blog post about it. Also, you can take a look at the demo here.
The build includes the following:
- Browserify (with browserify-shim)
- Watchify (caching version of browserify for super fast rebuilds)
- SASS (super fast libsass with source maps, and autoprefixer)
- [livereload]https://www.npmjs.com/package/gulp-livereload) for live reloading
- Image optimization
- Error handling in the console and in Notification Center
- Shimming non common-js vendor code with other dependencies (like a jQuery plugin)
- Separate minification task for production builds
TO use:
npm install
bower install
gulp
This will run the default
gulp task defined in gulp/tasks/default.js
, which has the following task dependencies: ['sass', 'images', 'html', 'watch']
- The
sass
task compiles your css files. images
moves images copies images from a source folder, performs optimizations, the outputs them into the build folderhtml
doesn't do anything in dev, but minifies HTML for productionwatch
haswatchify
as a dependency, which will run the browserifyTask with adevMode
flag that enables sourcemaps and watchify, a browserify add-on that enables caching for super fast recompiling. The task itself starts watching source files and will re-run the appropriate tasks when those files change.
All paths and plugin settings have been abstracted into a centralized config object in gulp/config.js
. Adapt the paths and settings to the structure and needs of the project.
There is also a production
task you can run:
gulp production
This will run JavaScript tests, then re-build optimized, compressed css and js files to the build folder, as well as output their file sizes to the console. It's a shortcut for running the following tasks: images
, minify-html
, minify-css
, uglifyJs
.