How to Use Base Template
This repository is used as a base for template development on the DivCom Platform. Follow the instructions below to use this template.
What does this do?
This repository contains the base css/js that is used by the platform on the front-end (customer facing). This allows you to override anything used currently without needing to either recreate it, or add additional files.
The gulpfile.js file configures what gulp does when the watch command is run. Basically, it compiles, concatenates, and minifies the sass and js, as well as copying and moving some files around so that they live in the correct directory.
Setup
- Install Node
- Once Node is installed, you need to install Gulp and Bower. These are installed using Node's package manager (NPM).
- Open up your terminal
- Run the command npm install -g gulp. This will install gulp globally on your machine.
- Run the command npm install -g bower. This will install bower globally on your machine.
- Navigate to this repository in your terminal.
- Run the command npm install. This will install the require node dependencies into this repository.
- Run the command bower install. This will install all of the bower included dependencies into this repository.
- Run the command gulp watch. This will watch for file changes in your resources/assets/sass/ and resources/assets/js directories.
A Note about Source Control
Since the compiled css/js files are included in the repository, this can sometimes lead to merge conflics within those files. This is not something to worry about, as long as there are no merge conflics in the js or scss files that are in the resources/assets directory, you can safely delete the compiled css/js files in public and recompile them just by running gulp, and commit those.
If you do have a merge conflict in the scss/js files in the resources/assets directory, fix the merge conflict, recompile the files, and commit.
Using Bower for Dependency Management
If you want to pull in a css/js package, say some jquery/boostrap plugin, you can do so by searching for the package with bower search <name>. Once you find the package you are looking for, you can install it using bower install <package name> -S. The -S in the command automatically updates the bower.json file which defines all of the packages and versions that are currently included. You will then need to update the gulpfile.js to include this new package in your minified code. See the examples in the gulpfile.js file on how to do this.