gulp-appx v0.0.2
Build system for Windows 10 App Demos
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
Install npm dependencies
npm install
This runs through all dependencies listed in package.json
and downloads them to a node_modules
folder in your project directory.
The gulp
command
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.
Run gulp
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.
gulp appx
This command will install your App as a hosted app pointing to http://localhost:3000
and then launch it.
gulp production
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']
.
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 your project.