{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular-cli/issues/2956","repository_url":"https://api.github.com/repos/angular/angular-cli","labels_url":"https://api.github.com/repos/angular/angular-cli/issues/2956/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular-cli/issues/2956/comments","events_url":"https://api.github.com/repos/angular/angular-cli/issues/2956/events","html_url":"https://github.com/angular/angular-cli/issues/2956","id":186193807,"number":2956,"title":"Rebuild speed and style workflows (feedback)","user":{"login":"sasxa","id":4272818,"avatar_url":"https://avatars.githubusercontent.com/u/4272818?v=3","gravatar_id":"","url":"https://api.github.com/users/sasxa","html_url":"https://github.com/sasxa","followers_url":"https://api.github.com/users/sasxa/followers","following_url":"https://api.github.com/users/sasxa/following{/other_user}","gists_url":"https://api.github.com/users/sasxa/gists{/gist_id}","starred_url":"https://api.github.com/users/sasxa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sasxa/subscriptions","organizations_url":"https://api.github.com/users/sasxa/orgs","repos_url":"https://api.github.com/users/sasxa/repos","events_url":"https://api.github.com/users/sasxa/events{/privacy}","received_events_url":"https://api.github.com/users/sasxa/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-10-31T03:04:01Z","updated_at":"2016-10-31T23:36:46Z","closed_at":null,"body":"I just finished rewriting my old gulp build tasks to work with CLI. Results are... interesting :) #1980 \r\n\r\n### CLI\r\n\r\n```\r\nc:\\project>ng s\r\n** NG Live Development Server is running on http://localhost:4200. **\r\n17976ms building modules\r\n...\r\nTime: 26259ms\r\n...\r\nwebpack: bundle is now VALID.\r\n\r\nwebpack: bundle is now INVALID.\r\nTime: 10887ms\r\n\r\nwebpack: bundle is now INVALID.\r\nTime: 6893ms\r\n\r\nwebpack: bundle is now INVALID.\r\nTime: 5964ms\r\n\r\nwebpack: bundle is now INVALID.\r\nTime: 9595ms\r\n```\r\n\r\n### Gulp\r\n\r\n```\r\nc:\\project>gulp\r\n[00:47:08] Requiring external module ts-node/register\r\n[00:47:15] Starting 'watch'...\r\n[brSync] Watching files...\r\n[brSync] Access URLs:\r\n       Local: http://localhost:3000\r\n[00:47:18] Finished 'serve' after 2.14 s\r\n\r\n[00:48:42] Starting 'ts'...\r\n[00:48:43] all files 16.27 kB\r\n[00:48:43] Finished 'ts' after 194 ms\r\n\r\n[00:49:33] Starting 'ts'...\r\n[00:49:33] Starting 'styl'...\r\n[00:49:33] Finished 'styl' after 171 ms\r\n[00:49:33] Finished 'ts' after 200 ms\r\n\r\n[00:50:17] Starting 'ts'...\r\n[00:50:17] Finished 'ts' after 57 ms\r\n\r\n[00:51:52] Starting 'ts'...\r\n[00:51:52] Starting 'styl'...\r\n[00:51:52] Finished 'styl' after 274 ms\r\n[00:51:52] all files 15.83 kB\r\n[00:51:52] Finished 'ts' after 308 ms\r\n```\r\n![1](https://cloud.githubusercontent.com/assets/4272818/19841565/fef07b6e-9f0d-11e6-953e-142aefea1f85.PNG)\r\n![2](https://cloud.githubusercontent.com/assets/4272818/19841566/fef089a6-9f0d-11e6-811f-3bebffc0fd48.PNG)\r\n\r\nWebpack is,, of course, much better at optimizing assets, while gulp can be optimized for really fast incremental builds. At this time I didn't do anything with vendor files, I'm just serving them with BrowserSync directly from `node_modules` - that's why there are so many requests and why load times are high. I also didn't bother with code splitting, AoT and other stuff Webpack and CLI already do - I just want fast dev builds; I'm definitely gonna use CLI for that stuff.\r\n\r\nThis is done at the same time in two terminal windows - first running Gulp watch and serving files with BrowserSync, second running webpack-dev-server. If you want to try it yourself, you can find full logs and files I used [here: (Gist)](https://gist.github.com/sasxa/85486bb62dc5dca3e48f6f385ef93135). Build works with CLI project with some modification - for `index.html` and `system.config.js` I used files from [docs/quickstart](https://angular.io/docs/ts/latest/quickstart.html) and modified them to fit my project. Only other thing needed to make it work is to remove `import './polyfills.ts';` from 'src/main.ts`.\r\n\r\nOK, now the reason I'm writing this is to share what I learned while trying to make this work, hopefully it will be useful and help improve CLI. \r\n\r\n\r\nStyling\r\n---\r\n* It would be nice if workflow with style pre-processors was easier: I'm using stylus and I couldn't find any options to include some shared files and mixins. In my project I created `src/styles/` folder where all my `.styl` files are and I'm importing them from `src/styles.styl` with `@import 'styles/defaults'`. I also have `src/styles/variables.styl` where I `@import \"C:/.library/styl/mixins.styl\"`... It would be nice if we had access to `stylus` to extend it, like I'm doing:\r\n```\r\n.pipe(__.stylus({\r\n    include: [\r\n      path.resolve(PATH.root, 'src'),\r\n      path.resolve(PATH.root, 'src', 'styles'),\r\n      path.resolve(PATH.lib, 'styl')]\r\n  }))\r\n```\r\n* Same goes for other modules (html-minifier, autoprefixer, csso...).  Since I couldn't setup paths where stylus looks for imports, I had to use `@import '../../styles/variables'` in my component styles, which I had to remove in order to process styles with Gulp `file.replace(/@import\\s+'(?:\\.\\.\\/)+/gmi, '@import \\'')`.\r\n\r\n* Another nice feature would be to have separate file for inline styles, that would be injected directly in `<head>` while the rest are loaded normally, via `<link>`. I think I saw something like this in early versions with `--mobile` and/or `--universal`... I saw some improvements with styles workflows on master branch, nice! Hope to see more (;\r\n\r\nDev builds\r\n---\r\n\r\n* Concerning module resolution, I'm using `\"compilerOptions.baseUrl\": \".\"` [path mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) so I can use `import {...} from 'app/core/service'` instead of `import {...} from '../../../../app/core/service'` in my components. Might be useful to be there by default? I saw some issues/PRs/commits with `import {...} from '@shared'` - not sure what's the status of that, but aliasing app root is really useful for me.\r\n\r\n* While building my gulp tasks I noticed that rebuilding typescript files seams to be main reason for high rebuild times. I chose to use settings that give me fastest results\r\n\r\n* I'm not bundling files, my components/services/modules etc. are in separate files. This allows me to utilize gulp's caching, so it will only process changed files:\r\n\r\n```\r\n  return gulp.src(files, {\r\n    since: gulp.lastRun('ts')\r\n  })\r\n```\r\n\r\n* I used `\"isolatedModules\": true,` compiler option to make this work. TypeScript now *Unconditionally emit imports for unresolved files.*, which also speed things up.\r\n\r\n* I'm injecting everything in js file - templates, styles, sourcemaps. It's not ideal, and sourcemaps are not precise, but I usually know what I'm doing, so most of the time I can find errors quickly. And if not, I can always use different options to track down bugs. With 50-250ms rebuild times I work differently then when I have to wait 5-15s... For production builds and various optimizations I really don't mind waiting 30-90s. \r\n\r\n* While I don't think something like this should be default option for CLI, perhaps there are some things you could turn off, or do differently to speed things up. Maybe provide some flag to turn off some safety checks, not bundle everything each time and such. I'm not that familiar with webpack to offer any suggestions, but maybe something I mentioned can help (;\r\n\r\nFinally, just to mention the dreadful systemjs... The way I have structured my modules and components is really, really painful to setup with systemjs. In fact, making it work took me almost as long as everything else... It was the reason why I was happy CLI switched to webpack. Working with CLI is soo much easier. If (or when!) CLI was 10x faster I would gladly forget everything about systemjs. Forever (:"},"comment":{"url":"https://api.github.com/repos/angular/angular-cli/issues/comments/257451044","html_url":"https://github.com/angular/angular-cli/issues/2956#issuecomment-257451044","issue_url":"https://api.github.com/repos/angular/angular-cli/issues/2956","id":257451044,"user":{"login":"reco","id":18141,"avatar_url":"https://avatars.githubusercontent.com/u/18141?v=3","gravatar_id":"","url":"https://api.github.com/users/reco","html_url":"https://github.com/reco","followers_url":"https://api.github.com/users/reco/followers","following_url":"https://api.github.com/users/reco/following{/other_user}","gists_url":"https://api.github.com/users/reco/gists{/gist_id}","starred_url":"https://api.github.com/users/reco/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reco/subscriptions","organizations_url":"https://api.github.com/users/reco/orgs","repos_url":"https://api.github.com/users/reco/repos","events_url":"https://api.github.com/users/reco/events{/privacy}","received_events_url":"https://api.github.com/users/reco/received_events","type":"User","site_admin":false},"created_at":"2016-10-31T23:36:46Z","updated_at":"2016-10-31T23:36:46Z","body":"hey angular cli team. looks all amazing.\r\n\r\nwe are in the same situation. we have a custom gulp workflow. its crazy fast compared to angular-cli. app reload for js/ts changes is fine but styles should be injected like browser sync does it. \r\n\r\nis this on the roadmap?\r\n"}}
{"actor":{"display_login":"reco"}}