SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

gulpメモ・その2~JavaScript/TypeScriptの圧縮~

コード中のスペース/タブなどのインデントや改行を取り除いたり、変数名を変えて短くしたりして、コードのサイズを小さくすることを、javascriptの圧縮とかminifyなどと言ったりします。
コードの圧縮をすることで、ファイルのダウンロード時間を短縮したり、ちょっとした難読化になります。

gulpでjavascriptの圧縮をする場合には、gulp-uglifyというライブラリが割と定番みたいです。
さっそく使ってみました。
まずは、以下のコマンドでインストール

npm install gulp-uglify --save-dev

gulp-uglifyで圧縮

タスクの定義は以下のような感じ。
deployタスクを実行すると、buildタスクで生成されたjsファイルを圧縮し、deployフォルダに出力します。

gulpfile.js
var gulp = require('gulp');
var typescript = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');

var config = {
    ts : {
        src: [
            './**/*.ts',       // プロジェクトのルート以下すべてのディレクトリの.tsファイルを対象とする
            '!./node_modules/**/*.ts' // node_modulesは対象外
        ],
        dst: '../build',
        options: { target: 'ES5', module: 'commonjs' }
    },
    min: {
        src: '../build/**/*.js',
        dst: '../deploy'
    }
};

gulp.task('build', function () {
    return gulp.src(config.ts.src)
               .pipe(sourcemaps.init())
               .pipe(typescript(config.ts.options))
               .js
               .pipe(sourcemaps.write('./'))
               .pipe(gulp.dest(config.ts.dst));
});


gulp.task('deploy', ['build'], function () {
    return gulp.src(config.min.src)
               .pipe(uglify())
               .pipe(gulp.dest(config.min.dst));
});