jsファイルをminifyするためのgulup設定

前回作成した、typescript環境にjavascriptのminifyを追加してみる。ついでに、npm installも試してみる

package.json

新しいプロジェクトディレクトリを作成して、そこに前回利用したpackage.jsonを置く

1
2

$ ls
package.json

npm installでモジュールをインストール

npm installを実行すると、package.jsonの内容から、必要なモジュールがインストールされる

1

$ npm install

こんな感じでインストールされている

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$ tree -L 2
.
├── node_modules
│   ├── gulp
│   ├── gulp-typescript
│   ├── gulp-watch
│   └── require-dir
└── package.json

5 directories, 1 file

あとは、前回作成したモジュール以外のファイルを持ってくる

gulp-uglify

javascriptファイルをminifyするための、gulp-uglifyをインストールする

1

$ npm install --save-dev gulp-uglify

/gulp/tasks/tsc.jsの内容前回作成したtsc.jsを以下のように編集する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var gulp = require("gulp");
var ts = require("gulp-typescript");
var uglify = require('gulp-uglify');
var config = require("../config");

gulp.task("tsc", function() {
  gulp.src(config.ts.src)
    .pipe(ts(config.ts.options))
    .js
    .pipe(gulp.dest(config.ts.dest))
    .pipe(uglify(config.uglify.options))
    .pipe(gulp.dest(config.uglify.dest));
});

./gulp/config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

module.exports = {
  ts: {
    src: "./src/ts/**/*.ts",
    dest: "./src/js",
    options: {
      removeComments: true,
      noImplicitAny: true,
      noLib: false,
      onoEmitOnErrorut: false,
      target: "ES5"
    }
  },
  // for gulp-uglify
  uglify: {
    dest: "./src/js/min",
    options: {
      beautify:true,
      preserveComments: 'some'
    }
  }
};

これでgulpを実行すると、通常のjsファイルとminifyされたjsファイルができましたね。

1
2
3
4
5

$ ls -R ./src/js
min       sample.js

./src/js/min:
sample.js