Build, Minify, Merge TypeScript by webassets
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.
- Building TypeScript
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.
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.
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
directory: : it means the root directory http://webassets.readthedocs.org/en/latest/environment.html#webassets.env.Environment.directory
debug: : you can switch it by own enviroments http://webassets.readthedocs.org/en/latest/environment.html#webassets.env.Environment.debug
filters: : Specify to minify, build, uglify and so on.
After making the config. Run the command to build:
webassets -c webassets.yml build
If you want to generate one JS, run it:
webassets -c webassets.yml build <bundle name>
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).