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
};

How Can We Be Better?

  • Add support for es6 modules
  • Add typescript support for e2e tests
  • Allow to opt-out of typescript and use babel
  • Get source maps to work correctly
  • Add support for react projects
  • Add support for experiments and bi generated code
  • Do less local customizations and more pull requests
  • All of this and more in...

Wix-Gruntfile Heroes

Questions???

Made with Slides.com