diff --git a/.gitignore b/.gitignore index 3c3629e6..a088b6f0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +bower_components diff --git a/README.markdown b/README.markdown new file mode 100644 index 00000000..429b5175 --- /dev/null +++ b/README.markdown @@ -0,0 +1,38 @@ +JavaScript Training +=================== + +JavaScript 初心者が JS の未来を見据えつつ、基礎をひととおり身に付けるための資料です。 + + +環境のセットアップ +------------------ + +1. 必要なものをダウンロード + + 下のコマンドを端末で実行してください。 + + git clone https://github.com/mixi-inc/JavaScriptTraining.git + cd JavaScriptTraining + npm run setup + + +2. webサーバーを立ち上げる + + 下のコマンドを端末で実行してください。なお、トレーニング中は + このコマンドを終了しないでください。 + + npm run serve + + +3. トップページにアクセスする + + ブラウザから [http://localhost:8080](http://localhost:8080) へアクセスしてください。 + + +4. トレーニングを始める + + public/stage1/tests.js を編集し、 [http://localhost:8080/stage1](http://localhost:8080/stage1) で + 実行されるすべてのテストにパスするようコードを編集してください。 + + コードを編集しおわったら、ページのリロードが必要です。 + ステージはすべてで 6 つあります。 diff --git a/gulp/serve.js b/gulp/serve.js index 9b370b15..cc532f28 100644 --- a/gulp/serve.js +++ b/gulp/serve.js @@ -1,11 +1,11 @@ /* eslint no-underscore-dangle:0 */ 'use strict'; +var path = require('path'); var stream = require('stream'); var gutil = require('gulp-util'); -var SERVER_SCRIPT = './server.js'; -var PORT = 8000; +var SERVER_SCRIPT = path.join(__dirname, '../server.js'); var serve = function() { @@ -18,7 +18,7 @@ var serve = function() { nodemon({ script: SERVER_SCRIPT, watch: [SERVER_SCRIPT], - env: { PORT: PORT }, + env: { PORT: serve.PORT }, stdout: false }) .on('readable', function() { @@ -31,7 +31,13 @@ var serve = function() { }); this.stderr.on('data', function(buf) { - gutil.log(gutil.colors.red(buf)); + var stderr = String(buf); + var isAddressAlreadyInUse = Boolean(stderr.match(/EADDRINUSE/)); + + var msg = 'サーバーを起動できませんでした。\n' + (isAddressAlreadyInUse ? + '既にサーバーが立ち上がっているか、8000 番ポートが既に使用されています。' : stderr); + + gutil.log(gutil.colors.red(msg)); }); }); }; @@ -39,4 +45,7 @@ var serve = function() { return readable; }; + +serve.PORT = 8000; + module.exports = serve; diff --git a/gulpfile.js b/gulpfile.js index eb85b527..02c4e6e4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,69 +1,76 @@ 'use strict'; var util = require('util'); +var path = require('path'); var gulp = require('gulp-help')(require('gulp')); +var merge = require('merge-stream'); -var PORT = 8000; -var BASE_URL = util.format('http://localhost:%d/', PORT); +var serve = require('./gulp/serve.js'); var tasks = [ { - cmd: 'stage1', - help: '意図した DOM を取得できているかテストします', - url: BASE_URL + 'stage1', - src: 'test/stage1.js' + id: 'stage1', + help: '意図した DOM を取得できているかテストします' }, { - cmd: 'stage2', - help: '意図通りに DOM の構造・スタイルが変更できているかテストします', - url: BASE_URL + 'stage2', - src: 'test/stage2.js' + id: 'stage2', + help: '意図通りに DOM のスタイルが変更できているかテストします' }, { - cmd: 'stage3', - help: '意図通りにイベントを利用できているかテストします', - url: BASE_URL + 'stage3', - src: 'test/stage3.js' + id: 'stage3', + help: '意図通りに DOM の構造が変更できているかテストします' }, { - cmd: 'stage4', - help: '意図通りにサーバーと通信できているかテストします', - url: BASE_URL + 'stage4', - src: 'test/stage4.js' + id: 'stage4', + help: '意図通りにイベントを利用できているかテストします' }, { - cmd: 'stage5', - help: '意図通りにモジュールを実装できているかテストします', - url: BASE_URL + 'stage5', - src: 'test/stage5.js' + id: 'stage5', + help: '意図通りに非同期処理ができているかテストします' }, { - cmd: 'stage6', - help: 'よくあるイディオムを読み書きできているかテストします', - url: BASE_URL + 'stage6', - src: 'test/stage6.js' + id: 'stage6', + help: '意図通りにモジュールを実装できているかテストします' + }, { + id: 'stage7', + help: 'よくあるイディオムを読み書きできているかテストします' } ]; tasks.forEach(function(task) { var run = require('gulp-run'); + var url = util.format('http://localhost:%d/%s/', serve.PORT, task.id); - gulp.task(task.cmd, task.help, ['lint-' + task.cmd], function() { + gulp.task(task.id, task.help, ['lint-' + task.id], function() { // We expected that mocha-phantomjs print colorized results, but it isn't. // So, I take a fast way that is using gulp-run. - return run('`npm bin`/mocha-phantomjs ' + task.url + ' || true').exec(); + return run('$(npm bin)/mocha-phantomjs ' + url + ' || true').exec(); }); }); tasks.forEach(function(task) { - gulp.task('lint-' + task.cmd, 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() { + var stage = path.join('public', task.id); + var js = path.join(stage, '**/*.js'); + var css = path.join(stage, '**/*.css'); + var csslintrc = path.join(stage, '.csslintrc'); + + gulp.task('lint-' + task.id, 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() { var eslint = require('gulp-eslint'); + var csslint = require('gulp-csslint'); + + var lints = merge( + gulp.src(css) + .pipe(csslint(csslintrc)) + .pipe(csslint.reporter()), - return gulp.src(task.src) - .pipe(eslint()) - .pipe(eslint.format()); + gulp.src(js) + .pipe(eslint()) + .pipe(eslint.format()) + ); + + return lints; }); }); + gulp.task('serve', 'サーバーを起動し、ブラウザでテストを確認できるようにします', function(){ - var serve = require('./gulp/serve.js'); return serve(); }); diff --git a/package.json b/package.json index e19ec34d..b662a250 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "description": "Training course repository for JavaScript by mixi", "main": "index.js", "scripts": { - "help": "$(npm bin)/gulp help" + "setup": "npm install; (cd public; bower install)", + "help": "$(npm bin)/gulp help", + "serve": "$(npm bin)/gulp serve" }, "repository": { "type": "git", @@ -21,22 +23,20 @@ "homepage": "https://github.com/mixi-inc/JavaScriptTraining", "devDependencies": { "body-parser": "^1.12.0", - "chai": "^2.1.1", - "chai-as-promised": "^4.3.0", + "event-stream": "^3.3.0", "express": "^4.12.2", "gulp": "^3.8.11", + "gulp-csslint": "^0.1.5", "gulp-eslint": "^0.6.0", "gulp-help": "^1.3.3", "gulp-nodemon": "^1.0.5", "gulp-run": "^1.6.6", "gulp-util": "^3.0.4", - "mocha": "^2.2.0", - "mocha-phantomjs": "^3.5.3" + "merge-stream": "^0.1.7", + "mocha-phantomjs": "^3.5.3", + "stream-combiner2": "^1.0.2" }, "dependencies": { - "bootstrap": "^3.3.2", - "chai-jquery": "^2.0.0", - "jquery": "^2.1.3", - "whatwg-fetch": "^0.7.0" + "bower": "^1.3.12" } } diff --git a/test/.eslintrc b/public/.eslintrc similarity index 100% rename from test/.eslintrc rename to public/.eslintrc diff --git a/public/bower.json b/public/bower.json new file mode 100644 index 00000000..8440f76d --- /dev/null +++ b/public/bower.json @@ -0,0 +1,36 @@ +{ + "name": "mixi-js-training-client", + "version": "0.0.0", + "homepage": "https://github.com/mixi-inc/JavaScriptTraining", + "authors": [ + "Kuniwak " + ], + "description": "Training course repositry for JavaScript by mixi", + "main": "index.html", + "moduleType": [ + "globals" + ], + "keywords": [ + "training" + ], + "license": "MIT", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "chai": "~2.1.2", + "chai-as-promised": "~4.3.0", + "mocha": "~2.2.1", + "bootstrap": "~3.3.4", + "chai-jquery": "~2.0.0", + "jquery": "~2.1.3", + "fetch": "~0.7.0", + "github-fork-ribbon-css": "~0.1.1", + "Buttons": "~2.0.0" + } +} diff --git a/test/common/mocha-patch.css b/public/common/mocha-patch.css similarity index 100% rename from test/common/mocha-patch.css rename to public/common/mocha-patch.css diff --git a/test/index.html b/public/index.html similarity index 86% rename from test/index.html rename to public/index.html index a13b22d7..83ab7927 100644 --- a/test/index.html +++ b/public/index.html @@ -4,8 +4,8 @@ mixi JS Training - - + +