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.