Documentation

Working With Grunt

As has been mentioned in previous section, Grunt is a JavaScript task runner. It helps with performing repetitive tasks like minification, compilation, unit testing, linting, etc. This is possible thanks to extensive Grunt Plugins library.

Grunt tasks are already set up for you. They are stored inside Unishop/gruntfile.js. But in order to have access to them via you Command Line tool you will need to install grunt-cli node package. Grunt CLI stands for Grunt Command Line Interface. To do that type following line in your terminal:

Grunt CLI commands

• grunt - this main command will fire default grunt task which includes: launching BrowserSync, vendor files concatination, javascript minification, sass compilation and lanching watch task. BrowserSync will create dev server and sync your browser with your code editor. Note: to use other separate tasks explained below you will need to open other Terminal window and leave this one with running server intact.
• grunt concat - concatination vendor .css / .js files found inside vendor folder in one vendor.min.css / vendor.min.js file which are linked to your HTML document.
• grunt uglify - minify and uglify main scripts.js file from src folder to dist/js/scripts.min.js file which linked to your HTML document.
• grunt pug - compiles .pug template files into HTML. Again from src to dist folder.
• grunt sass:expanded - compiles .scss files into non-minified CSS (css/styles.css). From src to dist folder.
• grunt sass:minified - compiles .scss files into minified CSS (css/styles.min.css). From src to dist folder.
• grunt watch - launches watch task. It will watch changes of your .scss / .js / .pug files and automatically compile them into .css / .js / .html.

Next steps

Now you when you are equiped with all necessary tools and dev invironment is all set you are ready to dive into Unishop customization.

Take some time to familiarize yourself with Project structure.