Bootstrap Angular 2 apps with Gulp, Jade + Stylus.
[WIP]
$ gulp serve
**launch browser: ** http://localhost:1981
Or if you don't want to run a server & simply want to output your source files to the build directory:
$ gulp build
Swapping out inline templates for Jade templates is super easy. For example, suppose you're following the "Hero" demo app, open up your app/app.component.ts
file, and replace this:
@Component({
selector: 'my-app',
template: '
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
'
})
with something like this:
@Component({
selector: 'my-app',
templateUrl: 'app/hero.jade'
})
Next create app/hero.jade
, and add the following:
h1 {{title}}
h2 {{hero.name}} details!
div
label id:
| {{hero.id}}
div
label name:
| {{hero.name}}
and voila! You've just replaced inline templates with Jade templates.
note: the hero.jade
file will will be compiled to hero.html
, which is why you link to the .html file and not the .jade file.
You can add .styl files to app/css
and it will compile everything from the root app/css/
(it will not be default watch subdirectories as it's assumed these will be includes that you include from files in the root directory).
It will also watch for .styl files and they will be compiled & saved to _build
dir following the same structure. For example, app/foo/bar.styl
will end up as _build/app/foo/bar.css
This setup makes it really simple to componentize your files. You can use it to easily do something like this:
app
my-component
my-component.jade
my-component.styl
my-component.ts
which compiles to:
_build
app
my-component
my-component.css
my-component.html
my-component.js
By default this is setup to use Jade & Stylus. However, if you prefer you can easily set it to use flat HTML and/or Sass:
To use Sass:
- Open gulpfile.js/tasks/_default.coffee and change all instances of
compile:stylus
tocompile:sass
To use HTML:
- Open gulpfile.js/tasks/_default.coffee and change all instances of
compile:jade
tocompile:html
If you receive errors, try deleting your "typings" folder and running npm run typings install