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).

Flexible

Why don't you build or search for a Docker image that minifies your Javascript? If you can do it locally, you should be able to replicate it on a Gitlab CI job. – Seve

Indeed, this looks like what I want to do! I will look into it! I have never worked with Docker images before but I will also try to see if I can do something this way thanks. – Flexible

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

Luhey

Late but still useful thanks! I will try this out since I have not done much on this problem. – Flexible

@Flexible do not hesitate to ping me if you have any more questions – Luhey

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

Cindacindee

Actually, your's is lighter/faster than my answer – Luhey

Answer 3

Using @hybrid approach, I adapt it to work with Google Closure Compiler
Will run only if source file has changed (changes)

minify-js:
  image: node:latest
  stage: process
  only:
    changes:
      - "public/js/script.js"
  script:
    - npm i -g google-closure-compiler
    - google-closure-compiler --js public/js/script.js --js_output_file tmp/script.min.js --language_in=ECMASCRIPT6_STRICT
  artifacts:
    paths:
      - tmp/script.min.js
    expire_in: 1 day

deploy-dev:
  stage: deploy
script:
    # Copy compiled script file if exist
    - test -f tmp/script.min.js && cp tmp/script.min.js public/js/script.min.js

Past