For a full discussion of the setup, please refer to the companion blog post.
Before running any Gulp tasks:
- Check out this repository
- Ensure you have node installed
npm installin the root directory (this will install bower dependencies too)
- For livereload functionality, install the livereload Chrome extension
The project ships with a directory structure like:
/healthy-gulp-angular | |---- package.json | |---- bower.json | |---- gulpfile.js | |---- /app | | | |---- index.html | |---- app.js | | | |---- /styles | | | | | |---- _settings.scss | | |---- app.scss | | | |---- /components | | | ... | |---- server.js | |---- /devServer | | | |---- ... | |---- (/dist.dev) | |---- (/dist.prod)
Let's break this down..
Server-side (command-line) dependencies.
Client-side (browser) dependencies.
Where all the Gulp streams and tasks are specified. Tasks are outlined below. This file is discussed in detail in the blog post.
All first-party application source code lives here, including HTML, scripts, and styles of whatever flavor.
The single page app "shell page". Adapted from Angular Seed. All sources are automatically wired in with gulp-inject.
The app's main angular module is defined here. This file is always loaded first with gulp-angular-filesort.
I like to group my angular scripts by comonent. Each sub-directory here typically contains a directive and a matching html partial.
Custom app styles (I use SASS) live here. There's also a foundation settings file.
This is the entrypoint for the ExpressJS development server. It respects the environment variable
NODE_ENV, taking its value as the directory out of which to serve static resources. It defaults to
dist.dev to serve development files, and also accepts
dist.prod to serve the production files.
The scripts for the development server. I'll typically put mock API responses in here.
The gulp tasks listed below deal with taking sources from /app and "compiling" them for either development or production.
*-dev tasks will output to /dist.dev, and
*-prod will output to /dist.prod. Here's an overview of the directory structures for each:
Sources built for development. Styles are compiled to CSS. Everything else from /app is validated and moved directly in here. Nothing is concatenated, uglified, or minified. Vendor scripts are moved in as well.
/dist.dev | |---- /bower_components | |---- /components | | | ... | |---- /styles | | | ... | |---- app.js | |---- index.html
Sources built for production. Everything is validated, things are concatenated and uglified. HTML partials are pre-loaded into the angular template cache with gulp-ng-html2js.
/dist.prod | |---- /scripts | | | |---- app.min.js | |---- vendor.min.js | |---- /styles | | | |---- app.min.css | |---- index.html
All of the following are available from the command line.
These tasks I use as part of my regular developments and deploy scripts:
gulp watch-devClean, build, and watch live changes to the dev environment. Built sources are served directly by the dev server from /dist.dev.
gulp watch-prodClean, build, and watch live changes to the prod environment. Built sources are served directly by the dev server from /dist.prod.
gulpDefault task builds for prod. Built sources are put into /dist.prod, and can be served directly.
All the subtasks can alo be run from the command line:
gulp validate-partialsChecks html source files for syntax errors.
gulp validate-indexChecks index.html for syntax errors.
gulp build-partials-devMoves html source files into the dev environment.
gulp validate-devserver-scriptsRuns jshint on the dev server scripts.
gulp validate-app-scriptsRuns jshint on the app scripts.
gulp build-app-scripts-devMoves app scripts into the dev environment.
gulp build-app-scripts-prodConcatenates, uglifies, and moves app scripts and partials into the prod environment.
gulp build-styles-devCompiles app sass and moves to the dev environment.
gulp build-styles-prodCompiles and minifies app sass to css and moves to the prod environment.
gulp build-vendor-scripts-devMoves vendor scripts into the dev environment.
gulp build-vendor-scripts-prodConcatenates, uglifies, and moves vendor scripts into the prod environment.
gulp build-index-devValidates and injects sources into index.html and moves it to the dev environment.
gulp build-index-prodValidates and injects sources into index.html, minifies and moves it to the dev environment.
gulp build-app-devBuilds a complete dev environment.
gulp build-app-prodBuilds a complete prod environment.
gulp clean-build-app-devCleans and builds a complete dev environment.
gulp clean-build-app-prodCleans and builds a complete prod environment.