Starter Gulp + Browserify project + Appx Tools
Includes the following tools, tasks, and workflows:
- Browserify (with browserify-shim)
- Windows 10 Hosted App Build System
- Watchify (caching version of browserify for super fast rebuilds)
- SASS (super fast libsass with source maps, and autoprefixer)
- BrowserSync for live reloading and a static server
- Image optimization
- Error handling in the console and in Notification Center
- Shimming non common-js vendor code with other dependencies (like a jQuery plugin)
- Multiple bundles with shared dependencies
- Separate compression task for production builds
npm install
This runs through all dependencies listed in package.json
and downloads them to a node_modules
folder in your project directory.
You can install gulp globally with npm install -g gulp
, which will add the gulp script to your global bin folder.
To use the version that's specified in your project's package.json. You can simply alias ./node_modules/.bin/gulp
to gulp
. Open up ~/.zshrc
or ~./bashrc
and add the following line:
alias gulp='node_modules/.bin/gulp'
Now, running gulp
in the project directory will use the version specified and installed from the package.json
file.
gulp
This will run the default
gulp task defined in gulp/tasks/default.js
, which has the following task dependencies: ['sass', 'images', 'markup', '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 foldermarkup
doesn't do anything but copy an html file over from src to build, but here is where you could do additional templating work.watch
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.
This command will install your App as a hosted app pointing to http://localhost:3000
and then launch it.
There is also a production
task you can run with gulp production
, which will 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', 'minifyCss', 'uglifyJs']
.
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 your project.
Application icon: web design by Simple Icons from the Noun Project
Project using: Gulp Starter as base