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)); });