Usage

Contents

1. Default Task
2. Reverse Proxy
3. Developing Hosted Apps
4. Deploying as a Static Site to GitHub Pages

## Default Task

To run the default task, just run:

gulp

The default tasks contains the following tasks:

Clean

This task deletes everything in the currently in the dist directory. This ensures there is a clean build every time.

Lint

This task will lint your JavaScript files using JSHint. Linting helps to detect errors and potential problems in your JavaScript code. You can configure the linting rules by editing src/.jshintrc.

Sass

This task copies your CSS files from src/css to the dist/css directory. In addition to copying the CSS files, it will also automatically prefix any properties that may require vendor prefixes (e.g. -ms or -webkit).

If you use want to use SASS, the task will also automatically compile those files to CSS as well.

Images

This task copies your images from the src/img to the dist/img directory. Image optimization may be added to this process at a later date.

JS

This task copies your JavaScript files from the src/js folder to the dist/js folder.

Markup

This task copies your html documents from the src/html to the root of the dist folder.

If you want to use Swig templates, this task will compile those as well.

Note: unlike the Images, JS, and SASS tasks, this task copies the files to the root of the dist directory. This should be taken into account when linking your CSS and JavaScript files.

Misc

This task copies any miscellaneous files from src/misc to the root of the dist folder.

Note: unlike the Images, JS, and SASS tasks, this task copies the files to the root of the dist directory. This should be taken into account when linking your CSS and JavaScript files.

Browserify

This task lets you use NodeJS style CommonJS modules on the front-end. It is used on several prominent web properties from companies like Facebook and Netflix. To learn more about using Browserify with this project, please check out the Examples section.

Browserify also lets you add transforms to transpile your code. This is useful if you want to use ES6/JavaScript 2015 or JSX.

You can learn more about Browswerify here.

Watch/Browser-Sync

This task watches all of your source files for changes. Once you save a file, it will either refresh the page (JavaScript/HTML change) or inject the changes (CSS) accordingly across all browsers.

Browser-Sync also includes additional features such as:

• Synchronized browser testing (mirroring clicks, scroll position, etc.) between multiple devices and browsers.
• Remote CSS debugging (outlining elements, depth, grid).
• Remote JS debugging.
• Network simulation (throttling).

Learn more here

## Reverse Proxy To run your project with a reverse proxy that tunnels to `localhost`, run: ```sh gulp ext ``` The `gulp ext` task will run all the default tasks listed in the [default](#default) section, then use [ngrok](https://ngrok.com/) to provide an public URL to `localhost`. This is particularly useful when developing on machines running on different networks, using RemoteIE, or a browser screenshot service.

After running the command, the console will print out a url which you can use to point browsers on external networks to your server. Browser-Sync can (optionally) keep them all synchronized as well. Note: This only lasts as long as your server is running.

## Developing Hosted Apps You can also build Windows 10 Hosted Apps using this project. If you are developing your app on the same machine as your server, just run: ```sh gulp appx:dev ``` This will run all the default tasks listed in the [default](#default) section, then it will side-load and launch a Windows 10 Hosted App pointing to your local server.

If you have your server running on another machine and used the gulp ext command, you can point the Hosted App to it. If your nrok url is https://123abc.ngrok.com, simply type:

gulp appx --ngrok 123abc

This will side-load and launch a Windows 10 Hosted App that points to the remote server.

If you have a server hosted somewhere else, you can use (currently broken):

gulp appx --url http://MicrosoftEdge.github.io/generator-appx

## Deploying as a Static Site to GitHub Pages GitHub provides free, unlimited static hosting for your projects through GitHub Pages. If you already have a repository set up, this task will deploy your build folder to GitHub Pages.

So if you had a repository at https://github.com/{user}/{project}, you could access the deployed site at https://{user}.github.io/{project}.

You can find more information about GitHub Pages here.