Wix Gruntfile

Making the most out of Grunt

Commands You need To Know

grunt serve
- runs a local dev server
grunt serve:coverage
- run a local dev server with coverage (hard to debug)
grunt serve:dist
- run a local server against built code (concat/minified)
grunt build
- build the project (and run protractor against built code)
grunt test:e2e
- run protractor against running server (dev or dist)

Grunt Serve

Check code style rules
Pre-build files
Run unit tests
Create local "app" server
Repeat after each save
Run protractor manually against dev server using "grunt test:e2e"

Grunt Build

Check code style rules
Pre-build files
Run unit tests
Concat & Minify
Update html tags
Create local "dist" server
Run protractor against "dist" server (in CI use Sauce Labs)

Check Code Style Rules

Tools: jshint, jscs, scsslint
Will fail the build!
Add plugins to your IDE
Delete linter config if you don't want it

Pre Build Files

scss -> css, sprites (+ autoprefixer)
haml -> html
svg -> font, css
json -> js (translations)
json -> js (specs, soon)
typescript -> javascript
and... vm -> html
replace.conf.js
replace.private.conf.js
real velocity - soon

Local Dev Server

app/

scripts/

styles/

views/

index.vm

.tmp/ (pre-build products)

scripts/

styles/

views/

index.html

http://localhost:9000/

/_api/* (not in e2e)

http://local.pizza.wixpress.com:9000/ (for the cookies)

You can add your own rules, it's easy!

Concat And Minify

<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/first-time.css">
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->

<!-- build:locale({.tmp,app}) scripts/messages_${locale}.js -->
<script src="scripts/locale/messages_${locale}.js"></script>
<script src="scripts/locale/countries_${locale}.js"></script>
<!-- endbuild -->

CSS blocks

JS blocks

Translation blocks

Concat And Minify - Angular

(function () {
  /* @ngInject */
  function MyCtrl($http, $q) {
    ...
  }
  
  angular.module('myApp')
    .controller('MyCtrl', MyCtrl);
})();

(function () {
  function MyCtrl($http, $q) {
    ...
  }
  MyCtrl.$inject = ['$http', '$q'];
  
  angular.module('myApp')
    .controller('MyCtrl', MyCtrl);
})();

Before

After

<div>my-view</div>

angular.module('myAppInternal')
  .run(function($templateCache) {
    $templateCache.put(
      'views/my-view.preload.html',
      "<div>my-view</div>");
  });

views/my-view.preload.html

templates.js (automatically concatenated to scripts/scripts.js)

Update HTML Tags

<!-- process-tags prefix('${staticsUrl}') -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
<!-- end-process-tags -->

<!-- #if( !${debug} ) -->
<script src="${staticsUrl}scripts/scripts.js"></script>
<!-- #else -->
<script src="${staticsUrl}_debug/scripts/app.js"></script>
<script src="${staticsUrl}_debug/scripts/controllers
  /main.js"></script>
<!-- #end -->

Tags are replaced with their concat/minified version (with debug option)

Becomes this:

Update HTML Tags

<script src="bower_components/angular/angular.js"></script>

<script src="${staticBaseUrl}services/third-party/angularjs
  /1.2.28/angular#if(!${debug}).min#{end}.js"></script>

Tags for popular libraries are replaced with references to Wix CDN in order to cache across applications (with debug option)

Becomes this:

Note that Wix CDN is sometimes a bit behind, so you might get Angular 1.2.28 although 1.2.29 was already released

Your Actual Gruntfile



module.exports = function (grunt) {
  require('wix-gruntfile')(grunt, {
    port: 9000,                              //port used by local server
    preloadModule: 'myAppInternal',          //module name for preload html
    translationsModule: 'myAppTranslations', //module name for translation js
    svgFontName: 'my-app',                   //font name for svg icons
    karmaConf: require('./karma.conf.js'),   //inheriting your karma config
    protractor: true                         //should run e2e tests
  });

  grunt.modifyTask('yeoman', {
    api: 'http://www.pizza.wixpress.com/_api/', //the proxied _api
    e2eTestServer: 'http://localhost:3333/', //the proxied _api in e2e
    local: 'http://local.pizza.wixpress.com:9000/' //url opened in grunt serve
  });

  //override sauce labs browser list
  //process.env.SAUCE_BROWSERS = 'Chrome FF';

  //Follow this URL for instructions on how to override built-in definitions:
  //https://github.com/wix/wix-gruntfile/blob/master/README.md
};