Skip to content

Latest commit

 

History

History
102 lines (65 loc) · 3.63 KB

README.md

File metadata and controls

102 lines (65 loc) · 3.63 KB
Raw

Getting Started

Welcome to the gulp flavor of our web app generator! If you're not familiar with gulp, we suggest checking out their docs.

If you haven't already, install yo and this generator by running:

$ npm install --global yo generator-gulp-webapp

Now you can scaffold your very own web app:

$ mkdir my-webapp
$ cd my-webapp
$ yo gulp-webapp

To start developing, run:

$ gulp serve

This will fire up a local web server, open http://localhost:9000 in your default browser and watch files for changes, reloading the browser automatically via LiveReload.

To run the tests in the browser, run:

$ gulp serve:test

To make a production-ready build of the app, run:

$ gulp

To preview the production-ready build to check if everything is ok:

$ gulp serve:dist

Tasks

To get the list of available tasks, run:

$ gulp --tasks

Gulp plugins

As you might have noticed, gulp plugins (the ones that begin with gulp-) don't have to be require()'d. They are automatically picked up by gulp-load-plugins and available through the $ variable.

Serve

We use the .tmp directory mostly for compiling assets like SCSS files. It has precedence over app, so if you had an app/index.html template compiling to .tmp/index.html, http://localhost:9000 would point to .tmp/index.html, which is what we want.

This system can be a little confusing with the watch task, but it's actually pretty simple:

  • notify LiveReload when compiled assets change
  • run the compile task when source assets change

E.g. if you have Less files, you would want to notify LiveReload when Less files have compiled, i.e. when .tmp/styles/**/*.css change, but you would want to compile Less files by running the styles task when source files change, i.e. app/styles/**/*.less.

Bower

We keep bower_components in the project root, you can read details about that here.

While gulp serve is running, installing Bower components will usually be as easy as:

$ bower install --save jquery

Behind the scenes wiredep will automatically inject assets from your Bower components to your HTML/SCSS files.

Keep in mind that there will sometimes be situations where you will have to do some extra work.

1. You ran bower install while gulp serve wasn't running

gulp serve watches bower.json and runs gulp wiredep on change, so the solution is to simply run gulp wiredep yourself.

2. There are images/fonts in the component

These are a bit tricky, as they can't be automatically injected. Ideally you would want to put them in a place where the link would work both in development and in production, like we do with Bootstrap, but that's sometimes not possible. In those cases you would need to do some gulp-replace trickery.

3. Field values in the component's bower.json are incorrect or missing

If there's a problem, it's usually with the main field, which wiredep uses to wire up assets. Fortunately you can always override these fields and send a pull request to that component's repository, fixing their bower.json 😉