9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

今回はちょっと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

9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?