@wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた

植木和樹

2017.06.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは植木和樹＠上越妙高オフィスです。先日 Naoki YAMADA (@wakamsha) さんがSpeakerdeckで公開したAltJS/AltCSSに関するスライドを大変興味深く読ませてもらいました。

このスライドは社内の新卒社員向け研修の内容とのことで、最後に「課題」があったため、今回私なりに回答してみました。

お題

JavaScript, CSS いずれも何かしらのプリプロセッサを使用すること（※HTMLは任意）
ローカルサーバーの起動
ファイルを変更したら自動的にビルド処理が実行
コンテンツは「Hello, world」でOK
自信がある人は何かしらのフレームワークも導入してみよう

回答

今回はフレームワークの導入は敷居が高かったので、最初の4つのみ回答してみました。

タスクランナーとして Gulp を利用する
AltJSとして TypeScript を使う
- __ gulp-typescript__ でTypeScriptをJavaScriptに変換する
- gulp-uglify でJavaScriptを Minify する
AltCSSとして SCSS を使う
- gulp-scss でscssをcssに変換する
- gulp-autoprefixer でブラウザ固有のプレフィックスを付与する
- gulp-minify でcssを Minify する
gulp-connect でローカルサーバー(port 8080)を起動する
- htmlファイルが変更されたらブラウザを自動リロードする
Gulpの watch を使って、変更したらビルド処理を実行する

環境構築

まずnpm initを実行してpackage.jsonを作成します。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (20170602_yamada)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: Kazuki Ueki
license: (ISC)
About to write to /Users/uekikazuki/Projects/20170602_yamada/package.json:

{
  "name": "20170602_yamada",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kazuki Ueki",
  "license": "ISC"
}


Is this ok? (yes)

次にgulpをインストールします。

$ npm install --save-dev gulp

$ npm run gulp -v
4.2.0

SCSSをCSSに変換するのためのパッケージをインストールします。

$ npm install gulp-sass --save-dev
$ npm install gulp-autoprefixer --save-dev
$ npm install gulp-minify --save-dev

TypeScriptをJavaScriptに変換するためのパッケージをインストールします。

npm install gulp-uglify --save-dev
npm install typescript gulp-typescript --save-dev

ローカルサーバーを起動するためのパッケージをインストールします。

npm install gulp-connect

コード

ファイルがたくさんあるのでgithubにアップしました。

https://github.com/ueki-kazuki/20170602_altjs_example

実行してみる

githubのコードをpullしてから、下記のようにgulpを実行します。

$ git pull https://github.com/ueki-kazuki/20170602_altjs_example.git
$ cd 20170602_altjs_example
$ npm install
$ npm run gulp js scss
$ npm run gulp

gulpを実行すると待機モードに入ります。

$ npm run gulp

> [email protected] gulp /Users/uekikazuki/Projects/20170602_altjs_example
> gulp

[09:23:42] Using gulpfile ~/Projects/20170602_altjs_example/gulpfile.js
[09:23:42] Starting 'connect'...
[09:23:42] Finished 'connect' after 19 ms
[09:23:42] Starting 'watch'...
[09:23:42] Finished 'watch' after 17 ms
[09:23:42] Starting 'default'...
[09:23:42] Finished 'default' after 54 μs
[09:23:42] Server started http://localhost:8080
[09:23:42] LiveReload started on port 35729

task connect でローカルの8080ポートでWebサーバーが起動するのでブラウザで http://localhost:8080/ にアクセスするとページが表示されます。

task html で *.html が修正されると自動的にブラウザの再読み込みが行われます。

task js と scss でTypeScriptやSCSSが修正されると、自動的にJavaScriptやCSSへの変換が行われます。