npm, bower and grunt

Install node, bower and grunt to use the build features.

Initialisation

Open a command line tool and change to the directory fileadmin/bsdist/ of your new TYPO3 instance.

  1. Install the node packages.
npm update
  1. Use bower to install the main components.
bower update

Font Awesome will not be installed in the default configuration! See file bower.json.

../../_images/bower.png

After sucessfully installing the node packages and bower components there are two new folders in fileadmin/bsdist.

../../_images/fileadmin-bsdist-after-bower.png
  1. The grunt task init copies files from bower_components/ to lib/ and executes all tasks (full).
grunt init
../../_images/grunt-init.png

Update merged and minified CSS and Javascript

When CSS and JavaScript files were added or modified you may use the default grunt task to merge and minify the resources.

grunt
../../_images/grunt.png

Or use tools in your IDE...

../../_images/phpstorm-grunt.png

The files in lib/ - i.e. bootstrap scss - are not processed with the default task. Only the task group named full sassifies and concats the resources in lib/.

grunt full