GitLab now enforces expiry dates on tokens that originally had no set expiration date. Those tokens were given an expiration date of one year later. Please review your personal access tokens, project access tokens, and group access tokens to ensure you are aware of upcoming expirations. Administrators of GitLab can find more information on how to identify and mitigate interruption in our documentation.
1. Install Node ( Welcome to the world of Node <3 )
2. run `npm install -g gulp-cli`
## Installation
1.`npm install` from root folder
## Running the application
*`gulp serve` - starts a local server and keeps watching the file changes
### Under the Hood!
Okay, Let's look at it one by one.
We installed [Node](https://nodejs.org/en/) so that we can use [Grunt](https://gruntjs.com)(The super awesome javascript task runnner).
But why do we even need a task runner? I'm sure you guys had fun at Selenium workshop, automating things. Grunt helps you automate a lot of things.
Now, take a look at package.json file. You'll see a lot of grunt-* dependencies each serving a special purpose in your project. eg. `grunt-contrib-concat` is for concatenating files.
Now, `Gruntfile.js`: This is where you configure/define your grunt tasks. Let's see what all things are defined there now.
Look at jshint
```
jshint: {
main: {
files : [{
src : ['Gruntfile.js', 'js/**/*.js']
}]
},
options: {
globals: {
'jQuery': true,
'angular': true,
'console': true,
'$': true,
'_': true,
'moment': true
}
}
},
```
Here `main` corresponds to a subtask. That means you run this task as `grunt jshint:main`. `grunt jshint`, as you would expect, will run all the subtasks associated with jshint(In this case we've only one, ie `main`)
Now, what does this `jshint:main` task do?
It checks all the files (ie,`Gruntfile.js` and all the javascript files within js folder) for syntax errors.
Similarly we've htmlhint, [pug](https://pugjs.org/) and concat.
Now the cool part! `watch` is the task which lets you watch different files for changes and runs associated task whenever some change happens.
for example,
```
js: {
files: 'js/**',
options: {
nospawn: true,
livereload: true
},
tasks: ['jshint', 'concat']
},
```
This portion inside `watch` configures `jshint` and `uglify` to be run whenever files inside js folder (`js/**`) changes.
Is that a lot to take in?
Just one more! `connect` task starts a local server at [http://localhost:8080](http://localhost:8080). It also inject a script to your page that keeps a live connection to the server, so that browser will automatically refresh whenever you change and save code. Doesn't that sound awesome to you?