How can I minify Javascript code in Gitlab CI?

Question

I write Javascript code for the web which I usually minify before uploading. I do it locally with a dedicated tool (like UglifyJS) but I would like to automate the process slightly using Gitlab Continuous Integration (because I use Gitlab on this project).

My aim seems quite simple: use Gitlab CI to minify the code on certain events and output these files in a convenient way for me to get them.

However, I haven't found anything (tutorial or other) to do this yet.

I have very little experience with Gitlab CI so I don't really know where to start but I have tried breaking that into smaller problems: - I can't find a simple script that does compression/minification that I could run using Gitlab CI, it's mostly bigger utilities (YUI Compressor, Google Closure Compiler). - If I find a way to compress the files can I push them on my repository from the CI? And if yes, I am wondering if that's actually good practice because that would version the minified files which is not useful.

My best shot at something not too complicated seems to be Google Closure Compiler which can be used with its API. And if I understand correctly, I could use Gitlab's Webhooks to make that API call (not sure exactly how I would pass the data this way but I'll see what I can do). But then, how can I read the response (Gitlab Webhooks don't seem fit for that) ? Maybe it would be better to make these API calls in Gitlab CI directly but I am not sure how to be honest and mostly how I can get the compressed data back and what I could do with it (where to store it).

Answer 1

My answer comes a bit late but it might help others. IMO, the easiest way would be to use a dedicated tool such as yuicompressor (also works great for CSS). Here is an example of a gitlab-ci:

before_script:
  - apt-get update && apt-get install -y -qq sshpass
  - apt-get install -y -qq default-jdk
  - mkdir yuicompressor
  - wget -P yuicompressor/ https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar

deploy_production:
  stage: deploy
  environment: Production
  only:
    - master
  script: 
    - java -jar yuicompressor/yuicompressor-2.4.8.jar -o '.js$:.js' src/static/js/*.js
    - export SSHPASS=$SSH_PASS
    - sshpass -e scp -o stricthostkeychecking=no -r src/* user@some_domain.net:~/www/

Explanation

This pipeline minify and replace all the js files contained in src/static/js/ before sending the entire project src to the production server with sshpass.

Before Script

Since gitlab runners do not have java by default, we install it apt-get install -y -qq default-jdk. We then only need to wget yuicompressor's jar

Hope it helps

Answer 2

If anyone is looking for solving this by using uglify.js in your pipeline. You can use below code in the pipeline and get the minified code

minify-js:
  image: node:latest
  stage: process
  script:
    - npm install uglify-js -g
    - mkdir -p ./output
    - uglifyjs ./public/js/xxx.js -o output/xxx.min.js -c -m
  artifacts:
    paths:
      - output

deploy-dev:
  stage: deploy
  script:
    - cp output/xxx.min.js public/js/xxx.min.js

Above yaml converts xxx.js to xxx.min.js in the minify_js task