Slide-Presentation

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:

Install npm dependencies

npm install

Install bower dependencies

bower install

Run gulp

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 folder
• html doesn't do anything in dev, but minifies HTML for production
• watch has watchify as a dependency, which will run the browserifyTask with a devMode 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.

Configuration

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.

Production files

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.