Build, Minify, Merge TypeScript by webassets

Today, I introduce webassets to build TypeScript, minify each generated JavaScript, and merge it.

webassets is a media manager written in Python to merge JS, compress JS/CSS, uglifying, and so on. and It also provide the way to coraborate with a veriety of WebFrameworks.

But in this post, you can learn way to build, minify, merge JavaScript from commandline interface by webassets:

  • Building TypeScript
  • Minifying JavaScript
  • Merging JavaScript

Install

First, install webassets and I’ll write config file for the buliding as YAML file. so you also need webassets with PyYAML.

pip install webassets
pip install PyYAML

now you might get webassets==0.9, PyYAML==3.11.

And to minify JavaScripts, install jsmin.

pip install jsmin

Python requiremests are them. And ofcause TypeScript is necessary to bulid them.

npm install -g typescript

now you’d better to check ‘tsc’ command.

OK. let’s make it.

Configuation for building

Now let’s write the configuration file. You can put ‘webassets.yml’ file you want. In this post, I won’t show you how to write it step by step. But I’ll show you a case and it’s sample file, and then, describe each meanings of it.

The case is for building a JavaScript file to a web application. It requires three external libraries (jquery, knockout, and underscore) and files I wrote are written in TypeScript. So you need to compile ts files and merge all of them and also minfy it. The number of TypeScript files is 7, 4 difinition file and 3 application files The config file of this case will be like this:

directory: ./karmaid/static
debug: False
bundles:
  js-karmaid:
    contents:
      - js/lib/jquery-2.1.0.js
      - js/lib/knockout-3.1.0.js
      - js/lib/underscore-1.6.0.js
      - contents:
        - js/app/config.d.ts
        - js/lib/jquery.d.ts
        - js/lib/knockout.d.ts
        - js/lib/underscore.d.ts
        - js/app/api.ts
        - js/app/ko_flushvalue.ts
        - js/karmaid.ts
        filters: typescript
    filters: jsmin
    output: js/karmaid.js

Run command

After making the config. Run the command to build:

webassets -c webassets.yml build

Then you can get own JavaScript files to correspond to each bundles. In abeve example, you can get ‘karmaid.js’ file.

If you want to generate one JS, run it:

webassets -c webassets.yml build <bundle name>

it’s over.

Why webassets

Because I wanted to try it. You know, you can choice fanstatic or grunt too.

And I want to use it with Pyramid and Python3, but now, pyramid_webassets on PyPI isn’t support Python3. This supporting will be finished soon (https://github.com/sontek/pyramid_webassets/issues/23).