Gulp-typescript + Typescript + Gulp v4 を使ってみました

今回はちょっとTypescriptに興味があって、Typescriptを使える環境を作って、ここでシェアしたいと思っています。
これよりは実習なので、もし間違ったことがあれば、お許しください。
そして、ご指示をお願いいたします。m(._.)m

## Githubリポジトリ
作成したリポジトリはGithubにあげました。よろしければ、ご確認ください。
参考になると思います。
https://github.com/haruKazuchi/typescript-gulpv4

## Package
使っているパッケージは以下になります。
　- gulp -> これは必須ですね
　- gulp-typescript　-> これもかなり必須ですね。Typescriptをjsファイルに変更するためなので。
　- typescript　-> これも確かに必須ですね。

ここからは任意です。Gulp-sassとbrowserSyncに慣れたので、開発のため、よく使います。
　- gulp-sass -> SCSSファイルをCSSに変更するためです。
　- gulp-csso -> CSSファイルをminify(圧縮)するためです。
　- browser-sync -> ブラウザテスティングです。MAMPやWAMPと似ていると思います。
　- gulp-autoprefixer -> 自動でCSSベンダープレフィックスを追加します。
　- gulp-uglify -> JSファイルをminify(圧縮)するためです。

##　ここから説明

### まずはPackage.jsonです

```
yarn init //yarnだったら。
```
 OR

```
npm init //npmだったら
```

　これで空なPackage.jsonを作成しました。

### 次は必要なパッケージをインストールしましょう。

```
yarn add gulp gulp-typescript typescript gulp-sass gulp-csso browser-sync gulp-autoprefixer gulp-uglify
```
　OR

```
npm install gulp gulp-typescript typescript gulp-sass gulp-csso browser-sync gulp-autoprefixer gulp-uglify
```


### Gulpfile.jsを作成しましょう。

```gulpfile.js
const { src, dest, parallel, series, watch } = require('gulp');
const sass = require('gulp-sass');
const minifyCSS = require('gulp-csso');
const browserSync  = require('browser-sync');
const autoprefixer = require('gulp-autoprefixer');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');

//ディレクトリ構成
const CONF = {
	SASS : {
		SOURCE : 'src/css/**/*.scss',
		OUTPUT : './public/assets/css',
	},
	TS : {
		SOURCE : 'src/ts/**/*.ts',
		OUTPUT : './public/assets/js',
	},
	BROWSERSYNC : {
		DOCUMENT_ROOT : './public',
		INDEX : 'index.html',
		GHOSTMODE : {
			clicks : false,
			forms  : false,
			scroll : false,
		}
	}
};

const browserSyncOption = {
  port: 5000,　//defaultは3000です。
  server : {
    baseDir : CONF.BROWSERSYNC.DOCUMENT_ROOT,
    index : CONF.BROWSERSYNC.INDEX,
  },
  ghostMode : CONF.BROWSERSYNC.GHOSTMODE,
  reloadOnRestart: true,
};

function css() {
  return src(CONF.SASS.SOURCE)
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(minifyCSS())
    .pipe(dest(CONF.SASS.OUTPUT))
}

function typescript() {
	return src(CONF.TS.SOURCE)
		.pipe(ts({
            noImplicitAny: true,
            outFile: 'main.min.js' //変更したファイル名
        }))
		.pipe(uglify())
		.pipe(dest(CONF.TS.OUTPUT))
}

function browsersync(done) {
  browserSync.init(browserSyncOption);
  done();
}

//HotReloading対応したいので、browserSync.reload()を適用してます。
function watchFiles(done) {
  const browserReload = () => {
    browserSync.reload();
    done();
  };
  watch(CONF.BROWSERSYNC.DOCUMENT_ROOT + '/**/*.html').on('change', series(browserReload));
  watch(CONF.SASS.SOURCE).on('change', series(css, browserReload));
	watch(CONF.TS.SOURCE).on('change', series(typescript, browserReload));
}

exports.css = css;
exports.typescript = typescript;
exports.default = series(parallel( typescript, css ), series(browsersync, watchFiles));
```


### gulpを実行しましょう。

```
gulp //Gulpはグローバルにインストールされたら 
```
OR

```
node ./node_modules/gulp/bin/gulp.js //ローカルディレクトリにインストールされたgulpを実行します。
```

 gulpfile.jsを作成しましたので、いよいよgulpが使えるになりました。


### Typescriptファイルを作成してみましょう。
```Main.ts
class Main{
    init():void {
      console.log("Hello Typescript")
    }
}

var main = new Main();
main.init();
```

HTMLファイルでMain.min.jsを読み込んだら、コンソールにHello Typescriptが印刷されます。

これでTypescriptの環境が整っていました。
これからTypescriptを頑張って勉強しようと思っています。



#### 参考：
https://gulpjs.com/
https://www.npmjs.com/package/gulp-typescript
https://qiita.com/n-oshiro/items/3bbd2293e2ff286d9f49