TypeScriptを使ってgulpでブックマークレット開発(BoW)

More than 1 year has passed since last update.

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


設定ファイル記述



  1. source/ 配下に配置したTypeScriptファイルをJavaScriptにコンパイル

  2. uglifyで圧縮

  3. 頭に javascript: を付ける


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



参考