CODEWITHSUNDEEP
angularbuild
Ilja
Ilja

Reputation: 46537

Build process logic for Angular application

So I have been developing in Angular for a while now and am wondering what would be a good build process for it as well as how can I implement it?

At the moment I have my project structure in the following way

app
  compontents
    component-one
      component-one.ts
      component-one.html
      component-one.scss
  services
  typings
  pages
    page-one
      page-one.ts
      page-one.html
      page-one.scss
  app.ts (contains bootstrap)
build
index.html

I saw many people use src folder instead of app, as well as have dist folder for what I assume is a build of application, hence am wondering what would be my next steps to implement this in a way where when I work all my files like .ts or .scss compile to .js and .css respectively in a nice way (at the moment I'm using gulp to compile these into a build folder that index.htlm accesses) and .ts files are transpiled to .js files in the same folder, so I have both .ts and .js files in the same place, I'm not sure where to move these.

Also when I look into console I see message saying that Angular is in developer mode, so I assume there is production mode? How to take advantage of this.

In general I want to have two folders src and dist where everything that needs transpiring and compiling goes into dist, so essentially have an application there that can be deployed to production server.

As a side note: I am currently compiling all sass files into one big file, where styles are applied to id's or classes etc. I know in Angular there is a styles option that can be added to @Component similarly to template, I am using templateUrl instead to target related html class, can I do something similar for a scss file or better leave it as is due to it not being css?

Upvotes: 2

Views: 1471

Answers (1)

Eggy
Eggy

Reputation: 4174

I think you should drop gulp for npm scripts and webpack. Don't get me wrong, Gulp is a great tool, however with more complicated projects then simple website, it is a real pain to deal with all build steps for js/css, setting up live-realod/browsersync, depending on multiple plugins, not to mention of production tasks and tests.

Webpack is so much better, it handle bundling for you, sourcemaps, transpiling, dev server, live reload, it's lighting fast, and have amazing documentation. And if you like to have component's styles and template in separate files, webpack will handle that too!

template.html

<h1>Hello world!</h1>

style.scss

$world: "World";

.someClass {
  &::after {
    content: "Hello " + $world;
  }
}

component.ts 

@Component({
  template: require('./template.html'),
  styles: [ require("!css!sass!./style.scss"); ]
})

as a results in bundle you will get: : 

// bundle.js
@Component({
  template: '<h1>Hello world!</h1>',
  styles: [ '.someClass::after { content: "Hello World"; }' ]
})

Npm scripts allow you to easly run your locally installed npm modules like rimraf, karma or webpack. It basicly does the job of gulp and it's built in node!

Recently I created my own little project with webpack which you might find useful.

And here is a list of few amazing repos and articles:

Regarding the production mode, it basicly means that angular's change detection won't run twice. You can turn it on by:

import {enableProdMode} from 'angular2/core';

enableProdMode();

Upvotes: 2

Related Questions