Incorporate front-end build tools
Opened this issue · 3 comments
See Gulp/Webpack/Bower
I can help with this. I've been developing a template repo for students to use for frontend projects. I'm not familiar with angular-specific needs, but happy to talk about it. I have soooo much free time. 😉
@jrhorn424 That'd be great! I have a bower file with most of the dependencies. I was also thinking about solving some of these problems with the build system. Open to discussion of course.
- compile SASS into CSS (currently just using CSS)
- optimizations (minifying files, concating files, linting)
- inject all the angular files, CSS and dependencies into index.html
@bhague1281 Cool! In my experience, going with npm instead of bower is preferable with well-maintained plugins. That makes it easy for any require-based tool (whether its webpack, jspm, or whatever) to work with the existing node_modules folder. In my current setup, I have a vendor.bundle.js produced and included before app.bundle.js in index.html.
I think it's a good idea to incorporate SASS.
Have you played with components at all? Probably not much use with angular, but webpack has the ability to define inline styles dynamically so CSS can be bundled with a component. It's probably not a good idea though.
With grunt and webpack both in the mix, I use webpack as an optimizer and bundler, and grunt as a pure task runner. That is to say, grunt doesn't need to be configured to minify, lint, and concat. Webpack with it's dev server and livereload is good for that. Instead, grunt launches servers, deploys, runs tests, etc.
When you say "inject" angular files do you mean include them as script tags? If so, webpack could bundle all your angular code into an app.bundle.js that can be included statically along with vendor.bundle.js. That gave me the freedom to ignore bower-include, which was a mess for me.
What other ideas do you have for tooling? I think I have enough to get started on a branch and maybe a demo. Could take some time, though.