This repo serves as a minimal starter for those looking to get up-and-running with Angular and ES6, using Gulp and Webpack for the build process. This seed is not a Yeoman generator. It's a minimal starter with tasks for building the boilerplate. These are its features:
NG6 uses Gulp and Webpack together for its build system. Yes, you don't need Gulp if you're using Webpack. This is true if your build system is only responsible for file manipulation. However, ours is not.
Webpack handles all file-related concerns:
*.spec.jsfiles as well
Gulp is the orchestrator:
All tests are also written in ES6. We use Webpack to take care of the logistics of getting those files to run in the various browsers, just like with our client files. This is our testing stack:
To run tests, type
npm test or
karma start in the terminal. Read more about testing below.
Tools needed to run this app:
npmOnce you have these, install the following as globals:
npm install -g gulp karma karma-cli webpack
npm install -g gulp karma karma-cli webpackinstall global cli dependencies
npm installto install dependencies
NG6 uses Gulp to build and launch the development environment. After you have installed all dependencies, you may run the app. Running
gulp will bundle the app with
webpack, launch a development server, and watch all files. The port will be displayed in the terminal.
Here's a list of available tasks:
default(which is the default task that runs when typing
gulpwithout providing an argument)
To run the tests, run
npm test or
Karma combined with Webpack runs all files matching
*.spec.js inside the
app folder. This allows us to keep test files local to the component--which
keeps us in good faith with continuing to build our app modularly. The file
spec.bundle.js is the bundle file for all our spec files that Karma will
Be sure to define your
*.spec.js files within their corresponding component
directory. You must name the spec file like so,
[name].spec.js. If you don't
want to use the
.spec.js suffix, you must change the
spec.bundle.js to look for whatever file(s) you want.
Following a consistent directory structure between components offers us the certainty of predictability. We can take advantage of this certainty by creating a gulp task to automate the "instantiation" of our components. The component boilerplate task generates this:
componentName/componentName.js // entry file where all its dependencies loadcomponentName.component.jscomponentName.controller.jscomponentName.htmlcomponentName.styl // scoped to affect only its own templatecomponentName.spec.js // contains passing demonstration tests
You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious.
To generate a component, run
gulp component --name componentName.
The parameter following the
--name flag is the name of the component to be
created. Ensure that it is unique or it will overwrite the preexisting
The component will be created, by default, inside
change this, apply the
--parent flag, followed by a path relative to
For example, running
gulp component --name signup --parent auth will create a
signup component at
gulp component --name footer --parent ../common creates a
footer component at
Because the argument to
--name applies to the folder name and the actual component name, make sure to camelcase the component names.