Quantcast
Viewing all articles
Browse latest Browse all 8691

Flash Advent Calendar 1日目 - JavaScriptでの開発環境の構築 -

当時はgruntが主流で、gulpが出始めた頃でした。
JSで本格的な開発をするにあたってどちらで進めるか悩んだのですが
折角だから新しいgulpを使ってみようという安易な理由でgulpを選びましたw

また、当時はJSでテストを全然書いてなかったので
デグレに苦しめられていて。。。この機会にテスト駆動で開発してみようと思ったのもgulpを選んだ理由の一つでもあります。

目次

  1. Node.jsを準備する
  2. gulp & karmaを準備する

1 Node.jsを準備する

nvmでNode.jsは管理する
※バージョンが古いですが、2015年位のお話なので、悪しからず

cd ~
git clone https://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh
nvm install v8.9.3
nvm alias default v8.9.3

自分のhomeディレクトリにnvmをcloneして起動
macを起動した時に自動でNode.jsが起動するよう設定

vim ~/.bash_profile 

## 下記の設定を追記する
[[ -s ~/.nvm/nvm.sh ]] && . ~/.nvm/nvm.sh
nvm use default
npm_dir=${NVM_PATH}_modules
export NODE_PATH=$npm_dir

## 追記した内容を反映
source ~/.bash_profile

2 gulp & karma

グローバルgulpkarmaをインストール

npm install -g gulp karma

プロジェクトに必要なpackageをインストール

package用途
gulpgulp本体
gulp-concat複数のJSファイルを一個のJSにしてくれる
gulp-uglify-es一個にまとめたJSをminfyする(es6対応)
karmakarma本体
karma-coverageレポートを出すためのモジュール
karma-jasminekarmaでjasmineを使えるようにする
karma-spec-reporterコンソールを見やすくする
jasminejasmine本体
browser-syncBrowsersync本体
karma-chrome-launcherChromeでテスト
karma-firefox-launcherFireFoxでテスト
karma-safari-launcherSafariでテスト

必要そうなパッケージをまるっとインストール

npm install browser-sync gulp gulp-concat gulp-uglify-es jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-firefox-launcher karma-jasmine karma-spec-reporter --save-dev

gulpfile.jsを設定

gulpfile.js
vargulp=require("gulp");varbrowser=require("browser-sync").create();varconcat=require("gulp-concat");varuglify=require("gulp-uglify-es");varServer=require("karma").Server;/**
 * server setting
 */gulp.task("server",function(){browser.init({server:{baseDir:"./",index:"index.html"}});});/**
 * browser reload
 */gulp.task("reload",function(){browser.reload();});/**
 * output js file
 */gulp.task("output",function(){returngulp.src(["src/**/*.js"]).pipe(concat("output.js"))// 複数のJSを一個にまとめる.pipe(uglify())// 圧縮.pipe(gulp.dest("."));// 圧縮したファイルを出力});/**
 * default setting
 */gulp.task("default",["server"],function(){gulp.watch(["src/**/*.js"],["tdd"]);gulp.watch(["output.js"],["reload"]);});/**
 * test-driven development
 */gulp.task("tdd",function(done){newServer({configFile:__dirname+"/karma.conf.js",singleRun:false},done).on("run_complete",function(browsers,results){if(results.failed){thrownewError("failed");}gulp.start.apply(gulp,["output"]);}).on("error",function(err){done(err);}).start();});/**
 * Run test once and exit
 */gulp.task("test",function(done){newServer({configFile:__dirname+"/karma.conf.js",singleRun:true},done).start();});

karma.conf.jsを設定

karma.conf.js
// Karma configuration// Generated on Wed Sep 06 2017 20:07:29 GMT+0900 (JST)module.exports=function(config){config.set({// base path that will be used to resolve all patterns (eg. files, exclude)basePath:'',// frameworks to use// available frameworks: https://npmjs.org/browse/keyword/karma-adapterframeworks:['jasmine'],// list of files / patterns to load in the browserfiles:["src/**/*.js","test/**/*.js"],// list of files to excludeexclude:[],// preprocess matching files before serving them to the browser// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessorpreprocessors:{'src/**/*.js':['coverage']},// test results reporter to use// possible values: 'dots', 'progress'// available reporters: https://npmjs.org/browse/keyword/karma-reporterreporters:['spec','coverage'],coverageReporter:{type:'html',dir:'coverage/'},// web server portport:9876,// enable / disable colors in the output (reporters and logs)colors:true,// level of logging// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUGlogLevel:config.LOG_INFO,// enable / disable watching file and executing tests whenever any file changesautoWatch:true,// start these browsers// available browser launchers: https://npmjs.org/browse/keyword/karma-launcherbrowsers:['ChromeHeadless','FirefoxHeadless'],// Continuous Integration mode// if true, Karma captures browsers, runs the tests and exitssingleRun:false,// Concurrency level// how many browser should be started simultaneousconcurrency:Infinity});};

これで準備完了です。

起動コマンド

gulp

テストだけを起動

gulp test

今になってですが、本当にこの時にテスト駆動を導入してよかったと思います。
複数人で開発ができたのも、テストでデグレが起きにい状況だったからと思います。

今日の記事は下記の記事の抜粋となります。

gulp + karmaでテスト駆動開発
ChromeとFireFoxのHeadless機能を使ってブラウザーテスト駆動開発

明日は実際にどのようなテストケースを書いてるかを記事にできたらと思います。


Viewing all articles
Browse latest Browse all 8691

Trending Articles