# Gulp - CSS and JS

## Setting Up the Build Process

D.T Uses gulp to compile and minify the css and javascript. If you will be contributing styling or JS changes you will need to use gulp.

* First you need to have Node.js installed on your computer. You can download and install Node.js from [here](https://nodejs.org/)
* Second from your terminal enter the Disciple Tools theme folder.
* From your Disciple Tools theme folder run npm install. You should only have to do this once.
* Once the install process is complete you should be able to type `gulp` in the command line and see an output that looks something like

```
[15:09:08] Using gulpfile /wp-content/themes/disciple-tools-theme/gulpfile.js
[15:09:08] Starting 'default'...
[15:09:08] Starting 'styles'...
[15:09:08] Starting 'scripts'...
[15:09:15] Finished 'scripts' after 7.14 s
[15:09:16] Finished 'styles' after 8.02 s
[15:09:16] Finished 'default' after 8.02 s
```

* If you will making multiple changes to css or js files you will probably not want to have to run gulp after every change. In this case you can use the command `gulp watch` and gulp will watch for any changes to scss or js files and will automatically run when the file is changed.

## CSS

D.T uses SCSS for CSS styiling. The SCSS files can be found under `dt-assets > scss.`

You probably want to modify:

* `_details.scss` for contact, group etc record page
* `_list.scss` for the list page
* `_main.scss` most other cases

Compile your changes to css by running `gulp` in your terminal in the theme root.\
This generates the `dt-assets/build/css/style.min.css` file that is used by the browser

## JS

If you modify `dt-assets/js/footer-scripts.js` you will also need to run `gulp` to apply the changes.\
The outpet is `dt-assets/build/js/scripts.min.js`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.disciple.tools/local-setup/gulp-js-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.