Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

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 用途
gulp gulp本体
gulp-concat 複数のJSファイルを一個のJSにしてくれる
gulp-uglify-es 一個にまとめたJSをminfyする(es6対応)
karma karma本体
karma-coverage レポートを出すためのモジュール
karma-jasmine karmaでjasmineを使えるようにする
karma-spec-reporter コンソールを見やすくする
jasmine jasmine本体
browser-sync Browsersync本体
karma-chrome-launcher Chromeでテスト
karma-firefox-launcher FireFoxでテスト
karma-safari-launcher Safariでテスト

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

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
var gulp    = require("gulp");
var browser = require("browser-sync").create();
var concat  = require("gulp-concat");
var uglify  = require("gulp-uglify-es");
var Server  = 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 ()
{
    return gulp.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)
{
    new Server({
        configFile: __dirname + "/karma.conf.js",
        singleRun: false
    }, done)
        .on("run_complete", function (browsers, results)
        {
            if (results.failed) {
                throw new Error("failed");
            }
            gulp.start.apply(gulp, ["output"]);
        })
        .on("error", function (err) {
            done(err);
        })
        .start();
});

/**
 * Run test once and exit
 */
gulp.task("test", function (done)
{
    new Server({
        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-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
        "src/**/*.js",
        "test/**/*.js"
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'src/**/*.js': ['coverage']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['spec', 'coverage'],


    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },


    // web server port
    port: 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_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['ChromeHeadless', 'FirefoxHeadless'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,


    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  });
};

これで準備完了です。

起動コマンド

gulp

テストだけを起動

gulp test

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

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?