ãšã³ããªãŒ
å°ãåã«ãç§ã¯livereloadã®ãããªäŸ¿å©ãªãã®ã䜿ãå§ããŸããïŒãããäœã§ããããç¥ããªã人ã®ããã«- ããã«é¢ããèšäºããããŸã ïŒã Livereloadã¯ãWebã¢ããªã±ãŒã·ã§ã³ã³ãŒãã®å€æŽã远跡ããå¿ èŠã«å¿ããŠãã©ãŠã¶ãŒã§ããŒãžããªããŒãããŸãã åæã«ãLivereloadã¯ã¹ã¿ã€ã«ã䜿çšããŠããã¹ããŒãã«åäœããåèµ·åããã«ãã®å Žã§ã¹ã¿ã€ã«ã眮ãæããŸããããã¯éæ³ã®ããã«èŠããŸãã
æ®å¿µãªããããã®ãããªæ°å€ã¯javascriptã§ã¯æ©èœããŸãããLivereloadã¯ãå€æŽãããã¹ã¯ãªããã®ã¿ã人éçã«çœ®ãæããæ¹æ³ãç¥ãããããŒãžå šäœããªããŒãããŸãã mithrilã®ãããªããŒã«ã䜿çšããå Žåãããã¯ç¹ã«æ²ããããšã§ãããã®ããŒã«ã§ã¯ããã¥ãŒïŒhtmlã®èªã¿åãïŒãjavascriptã§èšå®ãããŸãã ã¢ãã«ãŸãã¯ã³ã³ãããŒã©ãŒãå€æŽãããšããã¹ãŠãæ確ã«ãªããŸããããã¥ãŒã§divã®ã¯ã©ã¹ãå€æŽãããšïŒããšãã°ãããŒãã¹ãã©ããã¯ã©ã¹ã®é©åãªçµã¿åãããéžæããïŒãããŒãžãåèªã¿èŸŒã¿ããå¿ èŠã¯ãªãããã§ã-ãŸãã1ã€ã®é¢æ°ãå€æŽããŠã圌女ã®å©ãïŒ
äžè¬ã«ãããã¯ãã¡ããæããã®ã§ã¯ãããŸããïŒä»¥åã¯äœãããã«äœæ¥ããŠããŸããïŒããäœæ¥ãããå°ã䟿å©ã«ããŠã¿ãŸãããïŒ

æ¥ãã§ãã人ã®ããã«
- ãã¢ãªããžã㪠-ã¯ããŒã³ãnpmã€ã³ã¹ããŒã«ãgulp serve
- çµæãšããŠèµ·ãã£ãããšã®ã¢ãã¡ãŒã·ã§ã³
ã¹ããŒãžã³ã°
ã¢ãã«ããã¥ãŒã«ãããããçŽç²ãªé¢æ°ããããŸãïŒread-htmlïŒã ãã®ãããªé¢æ°ãå€æŽãããå Žåãæ°ããããŒãžã§ã³ããã©ãŠã¶ãŒã«ããŒãããå ã®ããŒãžã§ã³ã眮ãæããMithrilã®å Žåã¯m.redrawïŒïŒãåŒã³åºãå¿ èŠããããŸãã
æãç°¡åãªä»£æ¿æ¹æ³ã¯ããã®ãããªé¢æ°ããã¹ãŠã°ããŒãã«ãªããžã§ã¯ãã«è©°ã蟌ã¿ã以åã®çæ¯å°ã®ä»£ããã«ãã®ãªããžã§ã¯ããžã®åŒã³åºããé 眮ããããšã§ãã ãã®ãããªãã®ïŒ
//file1.js window.MyObj.MyFn = function (c) { return m("h1", c.text) } //file2.js var Page = { controller: function () { this.text = "Hello"; }, view: function (c) { return window.MyObj.MyFn(c); } }
ããã§ãfile1.jsããªããŒãããŠm.redrawïŒïŒããã«ããã ãã§ããã®åŸããã¥ãŒãåæç»ãããŸãã ãã®å Žåãã·ã¹ãã ã®çŸåšã®ç¶æ ïŒãã®å ŽåãPage Controllerã«ä¿åãããŠããŸãïŒãä¿åãããŸãã
ãã ãããã®ãããªåé¢ãæåã§è¡ãããã¯ãããŸããããŸããã³ã³ããŒãã³ãã®æŽåæ§ã䟵害ãããŸãïŒéçºäžã«1ã€ã®ãã¡ã€ã«ã®ã¿ãå€æŽããã³ã³ããŒãã³ãã®åäœãšå€èŠ³ã®äž¡æ¹ã調æŽãããšéåžžã«äŸ¿å©ã§ãïŒã次ã«ãã³ãŒããæ¢ã«èšè¿°ãããŠããŸãã ã ãããã£ãŠããœãŒã¹ã³ãŒãã解æããå¿ èŠãªé¢æ°ãæœåºããå¿ èŠããããŸãã
åèšãããšãã¿ã¹ã¯ã¯2ã€ã®ãµãã¿ã¹ã¯ã«èŠçŽãããŸãã
- æ¢åã®ã³ãŒãã§å¿ èŠãªé¢æ°ãèŠã€ããŠãããããå¥ã®ã¹ã¯ãªããã«æœåºããæ¹æ³
- ããŒãžããªããŒãããã«ãã®ã¹ã¯ãªãããæŽæ°ããããã«LiveReloadã«æããæ¹æ³
ãã¥ãŒé¢æ°ã®ååŸ
æãåçŽãªã±ãŒã¹ã§ã¯ãååãã¥ãŒãæã€ãã£ãŒã«ããšããŠå®£èšããããã¹ãŠã®é¢æ°ãèŠã€ããŠãåŒæ°ãã¹ãããããããšãå¿ããã«ããããã®æ¬äœãå¥ã®ãã¡ã€ã«ã«å ¥ããå¿ èŠããããŸãã ãã ããããã€ãã®ãã€ã³ãããããŸãã
- é¢æ°ã®åŒæ°ã§æž¡ãããèå¥åã ãã§ãªããã¯ããŒãžã£ãéããŠå©çšå¯èœãªèå¥åïŒå€æ°ãé¢æ°ãªã©ïŒãé¢æ°ã®æ¬äœã§äœ¿çšã§ããŸã
- äžéšã®é¢æ°ã¯ããã¥ãŒãšåŒã°ããŠãã¬ã³ããªã³ã°ããå¿ èŠã¯ãããŸãã
- äžéšã®é¢æ°ã¯ããã¥ãŒãšåŒã°ããªãå Žåã§ãã¬ã³ããªã³ã°ããå¿ èŠããããŸã
以äžã«äŸã瀺ããŸãã
var model = new Model(); //- , view model.view = function () { this.viewed = true; } // , view function formatDate(date) { return m("span.date", [ m("span.year", date.getFullYear()), formatMonth(date), (date.getDate()+1) ]) } var Page1 = { // mithril- view //formatDate model , m - //date, , view: function() { var date = new Date(); return m("h1", [model.title(), " today is ", formatDate(date)]); } }
æ£èŠè¡šçŸã§ã³ãŒãã解æãã1ã®åé¡ã解決ããã«ã¯ãæããã«ååã§ã¯ãããŸããã解æãå¿ èŠã§ãã 幞ããªããšã«ãæž¡ãããjsã³ãŒãã解æããéåžžã®jsonã®ãããªæ§æããªãŒïŒ ããã§ãã¬ã€ã§ããŸã ïŒãçæããesprimaã©ã€ãã©ãªããããŸãã ãã®ãããªããªãŒããã€ãã¹ããããšã¯é£ãããããŸãããã©ããªå Žåã§ãèŠéããªãããã«ãèãããããã¹ãŠã®ã¿ã€ãã®ããªãŒããŒããåŠçããå¿ èŠããããŸãã ããšãã°ãã¬ã³ãŒã
var a = 5;
ãŸã£ããåãã§ã¯ãªã
var a; a = 5;
ïŒãããã£ãŠã ãã¡ãã¡ã§è§£æããçµæïŒ
ããã§ãé¢æ°ãšãã®ãã¹ãŠã®äŸåé¢ä¿ãç°¡åã«èŠã€ããããšãã§ããŸãã é¢æ°ã®æ¬äœãåãåºããŠåå¥ã«ä¿åããã°ããŒãã«é¢æ°ã®åŒã³åºãããœãŒã¹ã³ãŒãã«å ¥ããŠã escodegenã©ã€ãã©ãªã䜿çšããŠã³ãŒããåéããŸãã
ã¿ã¹ã¯2ãš3ã解決ããã«ã¯ãCïŒå±æ§ãJavaã¢ãããŒã·ã§ã³ã®ãããªãã®ã圹ç«ã¡ãŸã-å¿ èŠãªæ©èœãããŒã¯ããäœããã®æ¹æ³ã§ãã ãªããªã javascriptã¯ãã®ãããªã¡ãœãããæäŸããŠããŸãããç§ã¯ãããèããªããã°ãªããŸããã§ãã-å±æ§ãé¢æ°ã®æ¬äœã®æåã®åŒã§ããæååã«ããŠãã ããã ãŸããå±æ§å€ãã__statelessãã®å Žåãé¢æ°ãååŸããå¿ èŠããããã__ ignoreãã¯å¿ èŠãããŸããã
var model = new Model(); //- , view model.view = function () { "__ignore"; this.viewed = true; } // , view function formatDate(date) { "__stateless"; return m("span.date", [ m("span.year", date.getFullYear()), formatMonth(date), (date.getDate()+1) ]) }
äžèšã®ãã¹ãŠã§ãç§ã¯å¥åã®st8lessã©ã€ãã©ãªãšããŠåéããŸããã çè«çã«ã¯ãä»ã®åæ§ã®ã¿ã¹ã¯ã«äœ¿çšã§ããŸãã
LiveReloadãã©ã°ã€ã³
å¿ èŠãªé¢æ°ãååŸããŠåå¥ã®jsãã¡ã€ã«ãšããŠä¿åã§ããããã«ãªã£ãã®ã§ãLiveReloadã«ããŒãžå šäœããªããŒãããã«æŽæ°ããããã«æ瀺ããå¿ èŠããããŸãã
LiveReloadã®ãã©ã°ã€ã³ãäœæããã®ã¯é£ãããããŸãããLivereloadã®äœ¿çšæ¹æ³ã«é¢ä¿ãªããããŒãžã«ã¹ãããããæ¿å ¥ãããããã©ãŠã¶æ¡åŒµæ©èœã䜿çšããŠååŸããŸãã ãã©ã°ã€ã³ã¯æšæºã®åäœãããåªå ããã次ã®ããã«èšè¿°ããå ŽåïŒ
function Plugin() { this.reload = function(path) { console.log("reloaded", path); return true; } } window.LiveReload.addPlugin(Plugin)
次ã«ãå€æŽããããšãreloadã¡ãœãããåŒã³åºãããtrueãè¿ããšãæšæºã®åŠçã¯è¡ãããŸããã ãããã£ãŠãåé€ãããé¢æ°ïŒãã¡ãããã®ãã¡ã€ã«ã®ååãç¥ã£ãŠããïŒã䜿çšããŠããã¡ã€ã«ã®ã¿ã®æŽæ°ã远跡ããããã ããåããŒãã§ããŸãã
åèµ·åããã«ã¯ãæ¢åã®ã¹ã¯ãªããèŠçŽ ãåé€ããDOMã«æ°ããèŠçŽ ãè¿œå ããŸããçŸåšã®æå»ã¯æ¯åã¹ã¯ãªããURLã«è¿œå ããããã£ãã·ã¥ãé²ããŸãã
doReloadScript: function (scriptNode) { var oldSrcBase = scriptNode.src.split("?")[0], parent = scriptNode.parentNode, newNode = this.window.document.createElement("script"); parent.removeChild(scriptNode); newNode.src = [oldSrcBase, new Date().getTime()].join('?'); parent.appendChild(newNode); },
çµç«ããã»ã¹ãžã®çµ±å
ãããžã§ã¯ããgulpïŒç§ã¯ãŸãã«ãããæã£ãŠããŸãïŒãŸãã¯å¥ã®ãã«ãã·ã¹ãã ã䜿çšããŠãã«ããããŠããå Žåããã¥ãŒé¢æ°ã®æœåºããã«ãããã»ã¹ã«åã蟌ãã®ãè«ççã§ãã gulpã®å Žåã¯ãééãããã¹ãŠã®jsã¹ã¯ãªãããåŠçããããããããã¥ãŒé¢æ°ãåŒãåºããŠå¥ã®ãã¡ã€ã«ãšããŠæžã蟌ã¿ãLiveReloadã«å€æŽãéç¥ãããã©ã°ã€ã³ãèšè¿°ããå¿ èŠããããŸããã
gulpçšã®ãã©ã°ã€ã³ã®äœæã«ã€ããŠã¯èª¬æããŸããããã¹ãŠã¯ããã¥ãŒããªã¢ã«ãšä»ã®ãã©ã°ã€ã³ïŒgulp-coffeeãgulp-concatãªã©ïŒã®äŸã«å³å¯ã«åŸã£ãŠè¡ãããŸããã ãã®çµæãgulpfile.jsã¯æ¬¡ã®ããã«ãªããŸãã
... other requires var changed = require('gulp-changed'); var extract = require('gulp-livereload-mithril'); var server; // gulp-, // livereload- ( ) gulp.task('compile', function () { // coffee-. // - main.coffee dashboard.coffee gulp.src("src/**/*.coffee") // -> main.coffee, dashboard.coffee // js .pipe(coffee()) // -> main.js, dashboard.js // - view- .pipe(extract()) // -> main'.js, dashboard'.js, st8less.js // . // st8less.js .pipe(changed("public", { hasChanged: changed.compareSha1Digest })) // -> st8less.js // public .pipe(gulp.dest("public")) // -> st8less.js // LiveReload .pipe(server ? server.notify() : gutil.noop()); }); // , LiveReload- // - compile gulp.task('serve', ['compile'], function () { server = gls.new('./server.js'); server.start(); gulp.watch(SRC, ['compile'] /* no need to notify here*/); });
gulp-changedã®äœ¿çšã«æ³šæããŠãã ããã main.coffeeã®ã¿ãå€æŽãããšãæŽæ°ãããmain.jsãšst8less.jsãåºåã«è¡šç€ºãããviewé¢æ°ãå€æŽãããšãmain.jsã¯å®éã«ã¯ãŸã£ããåãã«ãªããŸãã ãã ããmain.jsã®å€æŽæéã¯å€æŽããããããLiveReloadã¯ããŒãžå šäœããªããŒãããŸãã ãããé²ãã«ã¯ãå®éã®ã³ã³ãã³ããæ¯èŒããå¿ èŠããããŸããããã¯ãgulp-changedãã©ã°ã€ã³ãè¡ãããšã§ãã
gulpãšLiveReloadã®ãã©ã°ã€ã³ã¯ãå¥åã®ãªããžããªgulp-livereload-mithrilã«ãããŸãã 次ã«ã圌ã¯äžèšã®st8lessã©ã€ãã©ãªãåç §ããŸãã
æ°ããã¹ã¯ãªããã®æé»çãªã¢ããããŒã
ãã©ã°ã€ã³ã¯æ°ããjsãã¡ã€ã«ïŒst8less.jsïŒãäœæããhtmlããŒãžãããªã³ã¯ããå¿ èŠããããŸãã ãŠãŒã¶ãŒã«èªåã§ãããè¡ãããã«äŸé Œããããšãã§ããŸããããšã«ããããŠãŒã¶ãŒjsãã¡ã€ã«ãå€æŽããŸããåçŽãªdocument.writeããããã®1ã€ã«è¿œå ããŠã¿ãŸãããïŒ
ããã¯è¡ãããŸããããååã§ã¯ãããŸããã§ããã ããšãã°ãmain.jsã®å é ã«document.writeãè¿œå ãããã§ã«äžéã«ããmain.jsãæ¢ã«ã¬ã³ããªã³ã°ãããé¢æ°ã䜿çšããŠããå Žåããšã©ãŒãçºçããŸãã è¿œå ããã°ããã®ã¹ã¯ãªããèŠçŽ ã¯ããŸã ã¹ã¯ãªããã®èªã¿èŸŒã¿ãéå§ããŠããŸããã
ããã§æå®ãããã¹ã¯ãªãããäœããã®æ¹æ³ã§ããŒãããå¿ èŠããããåæajaxãªã¯ãšã¹ããéä¿¡ãã以å€ã«ã¯å¥ã®æ¹æ³ãèŠã€ããããšãã§ããŸããã§ããã ã¹ã¯ãªããã®1ã€ã®å é ã«è¿œå ãããæ§é ã¯æ¬¡ã®ããã«ãªããŸãã
(function loadScriptSynchronously() { var path = "st8less.js"; document.write('<script src="' + path + '"></script>'); var req = new XMLHttpRequest(); req.open('GET', path, false); req.send(); var src = req.responseText eval(src) }.call());
å¿ èŠã«å¿ããŠã{injectïŒfalse}ãã©ã°ã€ã³ãæž¡ãããšã§ãã®ææããªãã«ããããšãã§ããŸãã 次ã«ãã¹ã¯ãªããã¿ã°ãæåã§è¿œå ããå¿ èŠããããŸãã
ãŸãšã
åé¡ã¯å®å šã«è§£æ±ºå¯èœã§ããããšãå€æããäžãããã解決çã¯ããã¹ãªã«ã ãã§ãªããä»ã®åæ§ã®å Žåã«ãé©çšã§ããŸã-åå¿ããangular.js 1.xãæãæµ®ãã³ãŸãïŒå€ãã®å Žåããã£ã¬ã¯ãã£ãã®htmlã¬ã€ã¢ãŠãã¯ãã£ã¬ã¯ãã£ãã®jsã³ãŒãã«çŽæ¥é 眮ãããŸãïŒã
ãã®ãœãªã¥ãŒã·ã§ã³ã«ã¯ã次ã®ãããªæ¬ ç¹ããããŸãã
- esprimaã¯ES 6ãå®å
šã«ã¯ãµããŒãããŠããŸããã ã³ãŒãã«ãžã§ãã¬ãŒã¿ãŒãªã©ãå«ãŸããŠããå Žåããã©ã°ã€ã³ã¯äœ¿çšã§ããŸããã
ãœãªã¥ãŒã·ã§ã³ïŒES6ã³ãŒããES5ã«äºåå€æãã
- æ¢åã®ã³ãŒããå€æŽããŸãïŒã€ã³ãã³ããã¢ã©ã€ã³ã¡ã³ããªã©ãesprima/ escodegenãä»ããŠã³ãŒããæž¡ããšå€±ãããŸãïŒ
解決çïŒãŸã ãããŸããã
- äžéšã®é¢æ°ãåé€ãããšããããã°ãè€éã«ãªããŸã
ããããããã§ããããã¬ãŒã³ããŒã·ã§ã³æ©èœããããã°ããå¿ èŠã¯ãããŸããã§ãã-ååãšããŠãããžãã¯ã¯ãããŸããã ãŸããäžèº«ã確èªãããå Žåã§ãããã¹ãªã«ã®å Žåã¯ã次ã®ãããªè¡ãè¿œå ããã®ãæ¬åœã«ç°¡åã§ã
m "pre", JSON.stringify(someValueIWantToWatch)
èŠã©ããïŒ
䜿çšäŸã¯ãã¡ãã«ãããŸã ã
ãã©ã°ã€ã³èªäœã¯ããã«ãããŸã ã
ãæž èŽããããšãããããŸããã圹ã«ç«ãŠã°å¹žãã§ãã