Skip to content
Snippets Groups Projects
Commit d5886d31 authored by Akshay S Dinesh's avatar Akshay S Dinesh
Browse files

chore: fix ci and docs

parent 6d993a4b
Branches
No related merge requests found
......@@ -3,7 +3,7 @@ pages:
stage: deploy
script:
- npm install
- npm run install
- npm run build
artifacts:
paths:
- public
......
......@@ -7,76 +7,15 @@
## Presteps
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?
Let us know ;)
## Building
1. `npm run build`
## License
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment