gulp-uglifyでJavaScriptを圧縮する (CentOS 7) - Qiita の応用です。
環境
せっかくMicrosoft TypeScriptを使うので、今回はBash on Ubuntu on Windows上で開発します。
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=14.04
DISTRIB_CODENAME=trusty
DISTRIB_DESCRIPTION="Ubuntu 14.04.4 LTS"
Node.jsのインストール
Node.js公式の パッケージマネージャを利用した Node.js のインストール | Node.js に沿って、Bash on Ubuntu on WindowsにNode.jsをインストールします。
$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
$ sudo apt-get install nodejs
$ sudo npm install -g typings
$ sudo npm install -g gulp-cli
$ node -v
v4.7.0
$ npm -v
2.15.11
プロジェクト初期化
$ mkdir ts-test
$ cd ts-test
$ mkdir source
$ mkdir destination
各種npmパッケージ、gulpプラグイン、型定義情報ファイルをそれぞれ用意します。
$ echo '{}' > package.json
$ npm install gulp jquery typescript typings --save-dev
$ npm install gulp-typescript gulp-uglify gulp-replace --save-dev
$ typings install dt~jquery --name jquery --save --global
設定ファイル記述
-
source/配下に配置したTypeScriptファイルをJavaScriptにコンパイル - uglifyで圧縮
- 頭に
javascript:を付ける -
destination/配下にブックマークレットとして配置
以上を実行するgulpfileを作成します。
gulpfile.js
var gulp = require('gulp');
var ts = require('gulp-typescript');
var uglify = require('gulp-uglify');
var replace = require('gulp-replace');
var tsProject = ts.createProject({});
var src = './source';
var dst = './destination';
gulp.task('default', function(){
gulp.src(src+'/*.ts')
.pipe(tsProject())
.pipe(uglify())
.pipe(replace(/^(.*)/, 'javascript:$1'))
.pipe(gulp.dest(dst));
});
TypeScriptファイル作成
TypeScript公式のサンプルコードをそのまま使ってみます。
source/index.ts
/// <reference path="../typings/globals/jquery/index.d.ts"/>
// 以下TypeScript公式チュートリアル(https://www.typescriptlang.org/docs/tutorial.html)から引用
class Student {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
(<any>$('body')).html(greeter(user));
実行
$ gulp
ソースコードが destination/index.js に配置されました。
destination/index.js
javascript:function greeter(e){return"Hello, "+e.firstName+" "+e.lastName}var Student=function(){function e(e,t,r){this.firstName=e,this.middleInitial=t,this.lastName=r,this.fullName=e+" "+t+" "+r}return e}(),user=new Student("Jane","M.","User");$("body").html(greeter(user));