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

今回はちょっと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だったら。

npm init //npmだったら

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

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

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

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はグローバルにインストールされたら

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