Create a Shopware 4.x frontend template with grunt-init.

If you haven't already done so, install grunt-init.

Once grunt-init is installed, place this template in your ~/.grunt-init/ directory. It's recommended that you use git to clone this template into that directory, as follows:

git clone [email protected]:ShopwareAG/grunt-init-sw4-template.git ~/.grunt-init/sw4-template

(Windows users, see the documentation for the correct destination directory path. For proper bower support, please install mysysgit using the option "Run Git from the Windows Command Prompt".)

• Check your Javascript using JSHint
• Concatenate and uglify your Javascript
• LESS Support for the popular css preprocessor
• Use Twitter's bower to manage the dependencies of your template

At the command-line, cd into your Shopware templates directory, run this command and follow the prompts.

grunt-init sw4-template

Now cd into your newly created template directory and install grunt's dependencies:

cd emotion_my_template
npm install

Using the popular css preprocessor Less is as easy as writing pure css. Just place your Less files in the directory frontend/_resources/styles/less and just run the following command:

grunt less:development

Bower is built right into the grunt file, so you can install bower components using grunt.

In your template directory (where the Gruntfile.js is located), type the following command:

grunt bower-install:[pkg-name]

If you want to install jQuery as an example, you type the following command:

grunt bower-install:jquery

The uninstall process is as easy as installing a bower component into your template. As an example, we want to remove jQuery from our template, we just type the following command:

grunt bower-uninstall:jquery

• grunt
  • Runs JSHint, compiles Less in production mode (minifing using yuicompress), concatenates and uglifies your Javascript + minifies your CSS
• grunt build
  • Runs bower to install the dependenies, JSHint, compiles Less in production mode (minifing using yuicompress), concatenates and uglifies your Javascript
• grunt install-bower:[pkg-name]
  • Installs the specific bower package
• grunt uninstall-bower:[pkg-name]
  • Uninstalls the specific bower package

Please keep in mind that you can list all available tasks using the command grunt --help.

Copyright (c) 2013 "klarstil" Stephan Pohl. Licensed under the MIT license.