今回は、GitLab CIを活用して、TypeScript/Sassを使用したSPA開発を効率化したお話をご紹介いたします。
GitLab CIで何を行なうのか
SPA開発でのCIを解説していく前に、まずは以前の記事をご確認ください。CIについての説明を書いております。
今回、われわれがCIを導入しようという決断にいたった理由は、プログラムの品質を上げるためです。そこで、CIを活用して、以下のチェックを行なうことにしました。
・TypeScript/Sassをビルドする
・TSLint、SassLintにより、コーディング規約に沿ったコードになっているかどうかをチェックする
・mochaを活用したユニットテスト(単体テスト)を自動化する
それでは、各項目について詳しく説明していきます。
TypeScript/Sassをビルドする
まずはTypeScriptとSassのビルドです。
Gitからpullしたらビルドが通らない！といった経験はないでしょうか。
Gitへのpush時にビルドを実行するようにします。
ビルドの結果は、以下のようにGitLabの画面上で確認することができます。
※ プロジェクトを選んだ後に -> CI / CD -> Jobsを選択
$ gulp sass tsify
[10:01:13] Using gulpfile /builds/path/to/project/gulpfile.js
[10:01:13] Starting 'sass'...
[10:01:13] Finished 'sass' after 281 ms
[10:01:13] Starting 'tsify'...
[10:01:14] Finished 'tsify' after 412 ms
Job succeeded
ビルドについては、タスクランナーのGulpを使用しています。
Gulpを用いたTypeScript/Sassのビルドについては、以前の記事にて詳しく紹介していますので、ご確認ください。
TSLint、SassLintにより、コーディング規約に沿ったコードになっているかどうかをチェックする
TSLintはTypeScriptの静的コード解析ツール、SassLintはSassの静的コード解析ツールです。
それぞれのコーディング規約に準拠したコーディングになっているかどうかをチェックします。
ビルドと同様にGulpを使用しています。
Lintの結果は、以下のようにGitLabの画面上で確認することができます。以下はエラーがある場合の例です。
$ gulp sass-lint
[10:02:04] Using gulpfile /builds/path/to/project/gulpfile.js
[10:02:04] Starting 'sass-lint'...
[10:02:05] Finished 'sass-lint' after 114 ms
src/scss/sample.scss
1:10 warning Strings must use single quotes quotes
3:1 warning Multiline style comments should not be used no-css-comments
8:2 warning Leading underscores are not allowed clean-import-paths
～(略)～
$ gulp tslint
[10:02:06] Using gulpfile /builds/path/to/project/gulpfile.js
[10:02:06] Starting 'tslint'...
[10:02:07] Finished 'tslint' after 230 ms
ERROR: (comment-format) /builds/path/to/project/src/typescript/sample.ts[23, 3]: comment must start with a space
ERROR: (prefer-array-literal) /builds/path/to/project/src/typescript/sample.ts[1, 22]: Replace generic-typed Array with array literal: Array
ERROR: (quotemark) /builds/path/to/project/src/typescript/sample.ts[44, 7]: " should be '
～(略)～
ERROR: Job failed: exit code 1
Gulpのタスクをサンプルとして掲載いたします。
// @see https://www.npmjs.com/package/gulp-sass-lint
gulp.task('sass-lint', function() {
var sassLint = require('gulp-sass-lint');
gulp.src([
'./src/scss/**/*.scss',
// 3rd Party は除外
'!./src/scss/vendor/*.scss',
])
.pipe(sassLint({
configFile: './sass-lint.yml'
}))
.pipe(sassLint.format())
.pipe(sassLint.failOnError());
});
// @see https://www.npmjs.com/package/gulp-tslint
gulp.task('tslint', function() {
var tslint = require("gulp-tslint");
gulp.src([
'./src/typescript/**/*.ts',
// typings の型定義は除外
'!./src/typescript/typings/**/*.d.ts',
])
.pipe(tslint({
formatter: 'verbose',
configuration: './tslint.json'
}))
.pipe(tslint.report({
// Lintエラーで止めないようにする
// emitError: false
}));
});
mochaを活用したユニットテスト(単体テスト)を自動化する
mochaはJavaScriptのテストフレームワークです。
こちらも同様にGulpを使用しています。
ユニットテストの結果は、以下のようにGitLabの画面上で確認することができます。
$ gulp test
[10:04:27] Using gulpfile /builds/path/to/project/gulpfile.js
[10:04:27] Starting 'clean'...
[10:04:27] Finished 'clean' after 1.9 ms
[10:04:27] Starting 'test'...
sampleのテスト
✓ テスト1
✓ テスト2
2 passing (5ms)
Creating cache default...
node_modules/: found 59564 matching files
Created cache
Job succeeded
TypeScriptのユニットテストについては、以前の記事にて詳しく紹介していますので、ご確認ください。
GitLabでCIを動かすための設定
それでは、SPAのCIをGitLabで動かすための設定を解説します。
Gitリポジトリの直下に「.gitlab-ci.yml」という設定ファイルを置きます。そうすると、CIが動作するようになります。
弊社におけるCIの構成イメージを、サンプルとして掲載いたします。
大まかな流れとして、以下の設定が必要になります。
1. Alpine LinuxのNode.jsコンテナを起動する(Alpine Linuxは軽量であるという理由で採用しましたが、他のLinuxでも問題ありません)
2. Node.jsのセットアップを行なう(必要なモジュールの追加インストールや設定を行ないます)
3. TypeScript/Sass の Lint を行なう
4. TypeScript/Sass のビルドを行なう
5. TypeScript のユニットテストを行なう
# Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/
image: node:8.9-alpine
before_script:
# バージョン確認
- node -v
- npm -v
# 不足コマンドをインストールする
- apk add --update git python make g++
# npm のグローバルインストール
- npm install -g gulp typescript bower
# npm, bower のローカルインストール
- npm install
- bower install --allow-root
# キャッシュを有効にする
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
paths:
- node_modules/
stages:
- build
- test
lint:
stage: build
# gulp を使用して TypeScript/Sass の Lint を行なう
script:
- gulp sass-lint
- gulp tslint
build:
stage: build
# gulp を使用して TypeScript/Sass のビルドを行なう
script:
- gulp sass tsify
artifacts:
paths:
# build した結果を GitLab からダウンロードできるようにする
- $CI_PROJECT_DIR/output/
test:
stage: test
# gulp を使用して TypeScript のユニットテストを行なう
script:
- gulp test
まとめと予告
いかがだったでしょうか。
CIを始めたのはつい最近ですのでまだ慣れていない部分がありますが、徐々に作業効率・品質が上がってきていると感じています。
今回紹介した内容以外にも、検証環境への自動デプロイや、クロスブラウザーのテストランナーであるKarmaを用いたブラウザー上でのテストなど、自動化できることがあります。
これからもCIを積極的に活用した開発を行なっていきたいと思っています。
次回は、年明け一発目ということで、弊社代表からのご挨拶をお届けする予定です。
お楽しみに！
2014年3月から現職。当社のベンチャービジネスに心惹かれて入社。
それ以前はソフトハウス（2社）に在籍。
エンジニア歴はもう少しで20年。通信キャリアーのシステム開発、サーバーサイドプログラミングの経験が長い。
エンジニアとしてのベースはJava屋。Androidアプリ開発も。サーバーサイドはPHP, Node.jsが多い。
フロントエンドエンジニアとしては駆け出し。
趣味：ギター、ドラム、フットサル、お酒