Ok, so I have the following setup for the website I am working on:

• a git repository on GitLab (if it matters)
• a production server associated with my domain

Website architecture:

• Hack and HHVM (for which I have to run unit tests)
• Babel (which needs to be piled to JavaScript on deployment)
• SCSS (which needs to be transpiled to CSS on deployment)
• configuration files which also need to be adjusted on deployment

Example file tree

.
├── index.html
├── bin
|   └── my Hack scripts
├── dev-res 
|   ├── style (SCSS files)
|   └── js (Babel JS files)
├── res
|   ├── style (transpiled css files)
|   ├── js (piled Babel JS files)
|   └── other resosurces
├── tests/
├── vendor/
├── node_modules/
├── Gulpfile.js
├── package.json
├── poser.json
└── .gitignore 

This is a hypothetical file tree of my project in my puter (so, the one for development). So I've got poser.json and the Composer dependencies, I have the package.json and the Node Modules, I have the not-piled SCSS and Babel JS files.

For development and local testing, all the dependencies will be installed and all of these raw resources will be piled and saved in the res directory, but they are added to the .gitignore so as not to pollute the repository.

How should this happen?

I hit git push. GitLab triggers a Web Hook to my Jenkins instance (I know how to acplish this). Jenkins clones the repository in a working directory, fetches and installs all the dependencies, runs server-side tests and transpiles/piles all the resources, deletes all the development resources (*.scss, /dev-res/*.js, poser.json, package.json).

I decided Jenkins would be a good solution for this sort of things since I can host it on my own server. I know my problem may be too plex for you to write an entire tutorial here, but I need some guidance, an outline of how this process should be handled and some good reads would also be appreciated.

Ok, so I have the following setup for the website I am working on:

• a git repository on GitLab (if it matters)
• a production server associated with my domain

Website architecture:

• Hack and HHVM (for which I have to run unit tests)
• Babel (which needs to be piled to JavaScript on deployment)
• SCSS (which needs to be transpiled to CSS on deployment)
• configuration files which also need to be adjusted on deployment

Example file tree

.
├── index.html
├── bin
|   └── my Hack scripts
├── dev-res 
|   ├── style (SCSS files)
|   └── js (Babel JS files)
├── res
|   ├── style (transpiled css files)
|   ├── js (piled Babel JS files)
|   └── other resosurces
├── tests/
├── vendor/
├── node_modules/
├── Gulpfile.js
├── package.json
├── poser.json
└── .gitignore 

This is a hypothetical file tree of my project in my puter (so, the one for development). So I've got poser.json and the Composer dependencies, I have the package.json and the Node Modules, I have the not-piled SCSS and Babel JS files.

For development and local testing, all the dependencies will be installed and all of these raw resources will be piled and saved in the res directory, but they are added to the .gitignore so as not to pollute the repository.

How should this happen?

I hit git push. GitLab triggers a Web Hook to my Jenkins instance (I know how to acplish this). Jenkins clones the repository in a working directory, fetches and installs all the dependencies, runs server-side tests and transpiles/piles all the resources, deletes all the development resources (*.scss, /dev-res/*.js, poser.json, package.json).

I decided Jenkins would be a good solution for this sort of things since I can host it on my own server. I know my problem may be too plex for you to write an entire tutorial here, but I need some guidance, an outline of how this process should be handled and some good reads would also be appreciated.

• javascript
• jenkins
• babeljs
• jenkins-workflow

Share Improve this question Follow edited Mar 8, 2016 at 23:27 mprat 2,4811717 silver badges3333 bronze badges asked Mar 8, 2016 at 22:19 VictorVictor 14.7k2424 gold badges8686 silver badges157157 bronze badges 1

• 1 Why downvote without any remarks? – Victor Commented Feb 11, 2017 at 8:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

There are so many ways to answer this, I can literally think of 5 off the top of my head. But in the interest of time and space let me give you the my best answer.

I think this will be better achieved using docker. This link will help you get setup with that aspect. Next, you will need the docker plugin for jenkins

Now let's configure your project.

You will need to do a freestyle build. After you enter your git repository information and credentials you will need to configure the build itself. As a side note, I would configure the workspace to delete at each build so the the package.json dependancies do not kill space on your build host. Now the build configuration. I would like to think you have a place where your artifacts are being stored so my steps are using artifactory:

1. Creating a new build job in Jenkins is simple: just click on the “New Job” menu item on the Jenkins dashboard.
   • Freestyle build jobs are general-purpose build jobs, which provides a maximum of flexibility.
   • You can also copy an existing job, which is a great way to create a new job that is very similar to an existing build job, except for a few configuration details. ...
2. Add your Source Code Management
   • Choose Git
   • Add your repository link
   • Select the appropriate credentials
   • Select the appropriate branch
3. Build Environment
   • Check Delete workspace before build starts
   • Check Provide Configuration files
     • Choose artifactory-npmrc
     • In the Target field enter: .npmrc
4. Build
   • Add build step
   • Bring the menu done and select Execute shell
   • Enter in the following mands:

Now as you stated there is a lot more to this and I wold be more then willing to collaborate with you to get this done. If you have any questions please do not hesitate to ask

#!/bin/bash

npm install --registry=http://artifactory.:8081/artifactory/api/npm/npm-virtual
npm publish --registry=http://artifactory.:8081/artifactory/api/npm/npm-private

5. Select Apply and then select save
6. On the left side of the dashboard choose Build Now