When we run rock build it performs the following tasks for front-end:
rock --runtime=node08 run grunt build- Use Grunt and Bower to download all front-end dependencies;
- Organize the downloaded files on the file system.
rock --runtime=node08 run grunt install- Concatenate & minify JS & CSS into new files;
- Write the new files to the file system;
- Create a list of paths to these new files;
- Write the list as
build_values.jsonon the file system.
Grunt is a task runner and Bower is a package manager. They are node tools that are installed during the rock build process. For more details, see the Resources section below.
Grunt's tasks are stored in /Gruntfile.js and Bower's list of dependencies are stored in /bower.json.
Webstack has two types of front-end dependencies:
a) 3rd party code such as bootstrap or jQuery
b) "swig modules" - standalone repos that contain HTML, CSS & JS for UI components such as the header login, or the header language switcher. These modules can be used by other products in the company like Footage, Music or Enterprise to give a consistent user experience across different Shutterstock products.
Grunt runs its Bower task, causing Bower to pull down CSS, JS, HTML, fonts and images to the requesting machine.
Once the files are received, they are organized into directories under /public/webstack/ and /views/.
Where the files are placed is decided through tasks in Gruntfile.js AND information in bower.json.
| PATH | PURPOSE |
|---|---|
/public/webstack/css/vendor/src/shutterstrap/ |
CSS associated with "Shutterstrap" |
/public/webstack/js/vendor/src/[dir]/ |
Includes all 3rd-party JavaScript, where [dir] is Bower's name for the 3rd party content. For example, /public/webstack/js/vendor/src/html5shiv/ |
/public/webstack/img/ |
Images associated with "Shutterstrap" |
/public/webstack/fonts/[dir]/ |
Fonts associated with "Shutterstrap", where [dir] is the name of a font family |
/public/webstack/css/ss-includes/ |
CSS associated with swig modules |
/public/webstack/js/ss-includes/ |
JavaScript associated with swig modules |
/views/ss-includes/ |
HTML associated with swig modules |
The webstack repo also has its own JavaScript and CSS files. They are similary stored under /public/webstack/.
| PATH | PURPOSE |
|---|---|
/public/webstack/js/implementation.js |
Sitewide JS |
/public/webstack/js/page/src/ |
JS specific to a page |
/public/webstack/css/implementation.css |
Sitewide CSS |
/public/webstack/css/page/src/ |
CSS specific to a page |
Grunt
A javascript task runner. It performs tasks like Compiling, Linting, Unit testing, Concatenation, Minification etc
http://gruntjs.com/ & http://mikemclin.net/install-grunt-js-task-runner/
Bower
Frontend package manager for the web. It exposes the package dependency model via an API that can be consumed by a more opinionated build stack.
http://bower.io/ & https://github.com/bower/bower
npm-shrinkwrap.json vs package.json
When npm install installs a package with a npm-shrinkwrap.json file in the package root, the shrinkwrap file (rather than package.json files) completely drives the installation of that package and all of its dependencies (recursively).
http://blog.nodejs.org/2012/02/27/managing-node-js-dependencies-with-shrinkwrap/