# Working with Gulp

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

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

`npm install -g gulp-cli`* if you are on Mac make sure to use sudo to install packages globally otherwise you may runt into error.

## Gulp CLI commands

- `gulp` - this main command will fire default gulp task which includes: launching BrowserSync, vendor files concatination, javascript minification, sass and pug 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.
- `gulp concat:js` - concatination vendor `.js` files found inside `vendor` folder in one `vendor.min.js` file which are linked to your HTML document.
- `gulp concat:css` - concatination vendor `.css` files found inside `vendor` folder in one `vendor.min.css` file which are linked to your HTML document.
- `gulp uglify` - minify and uglify main `theme.js` file from `src` folder to `dist/js/theme.min.js` file which linked to your HTML document.
- `gulp pug` - compiles `.pug` template files into HTML. Again from `src` to `dist` folder.
- `gulp sass:expanded` - compiles `.scss` files into non-minified CSS (css/theme.css). From `src` to `dist` folder.
- `gulp sass:minified` - compiles `.scss` files into minified CSS (css/theme.min.css). From `src` to `dist` folder.
- `gulp 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 MStore customization.

Take some time to familiarize yourself with Project Structure.