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

はじめに

こんにちは植木和樹＠上越妙高オフィスです。先日 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

> 20170602_yamada@1.0.0 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への変換が行われます。

まとめ

普段サーバーサイドばかりなので、実際にフロントエンドの技術に触れてみると新鮮で楽しいですね。

と同時にいろいろな疑問がでてきます。

• SASSとSCSSって何が違うの?
• Angularは1.0, 2.0, 4.0 どれを使えばいいの?
• 2017年に(gulp|gulp-connect|scss|typescript)はオワコンなの?

山田さんの課題は、最近のJavaScript界隈のほんの端っこを知る機会としてとても良い内容だと思いました。ぜひ皆さんも実際にコードを書いて動かしてみてください。

なお今回の課題回答は「よくわからない、オレは雰囲気でJavaScriptをやっている」レベルなので、社内からのツッコミは大歓迎です。

参考資料

• Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG
• gulp-typescript
• Gulpでlocalhostサーバーを起動、さらにBrowser-Syncで作業効率化 | レンタルサーバーのCPIスタッフブログ