Last active
December 8, 2015 05:25
-
-
Save kasecato/030f002e25cbe707b35e to your computer and use it in GitHub Desktop.
まだPromiseで消耗してるの？ ES7 Edge Async vs Babel Async Functions （ネイティブ vs トランスパイラ） ref: http://qiita.com/k--kato/items/96566a40f6b4761a5fa1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "main": "gulpfile.js", | |
| "dependencies": { | |
| "babel": "^5.8.23", | |
| "babelify": "^6.3.0", | |
| "gulp-concat": "^2.6.0", | |
| "gulp": "^3.9.0", | |
| "gulp-html-minifier": "^0.1.6", | |
| "browserify": "^11.2.0", | |
| "gulp-rename": "^1.2.2", | |
| "gulp-sourcemaps": "^1.6.0", | |
| "gulp-minify-css": "^1.2.1", | |
| "vinyl-buffer": "^1.0.0", | |
| "vinyl-source-stream": "^1.1.0", | |
| "gulp-eslint": "^1.0.0", | |
| "bootstrap": "^3.3.5", | |
| "gulp-util": "^3.0.6", | |
| "gulp-uglify": "^1.4.1" | |
| }, | |
| "devDependencies": {}, | |
| "scripts": { | |
| "gulp": "gulp" | |
| }, | |
| "repository": { | |
| }, | |
| "license": "MIT" | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var gulp = require('gulp'); | |
| var browserify = require('browserify'); | |
| var babelify= require('babelify'); | |
| var util = require('gulp-util'); | |
| var buffer = require('vinyl-buffer'); | |
| var source = require('vinyl-source-stream'); | |
| var concat = require('gulp-concat'); | |
| var rename = require('gulp-rename'); | |
| var htmlmin = require('gulp-html-minifier'); | |
| var sourcemaps = require('gulp-sourcemaps'); | |
| var js_edge_dir = [ | |
| 'src/app.js' | |
| ]; | |
| var js_babel_src = | |
| 'src/app.js' | |
| ; | |
| var html_dir = [ | |
| 'src/**/*.html' | |
| ]; | |
| var data_dir = [ | |
| 'src/bigdata.json' | |
| ]; | |
| // Edge Concatenate | |
| gulp.task('js-edge', function () { | |
| return gulp.src(js_edge_dir) | |
| .pipe(concat('all.edge.js')) | |
| .pipe(gulp.dest('dist/js')) | |
| ; | |
| }); | |
| // Babel & Concatenate | |
| gulp.task('js-babel', function () { | |
| return browserify(js_babel_src, { debug: true }) | |
| .add(require.resolve('babel/polyfill')) | |
| .transform(babelify) | |
| .bundle() | |
| .on('error', util.log.bind(util, 'Browserify Error')) | |
| .pipe(source('all.babel.js')) | |
| .pipe(buffer()) | |
| .pipe(sourcemaps.init({loadMaps: true})) | |
| .pipe(sourcemaps.write('./')) | |
| .pipe(gulp.dest('./dist/js')); | |
| }); | |
| // Minify HTML | |
| gulp.task('html', function() { | |
| gulp.src(html_dir) | |
| .pipe(htmlmin({collapseWhitespace: true})) | |
| .pipe(gulp.dest('dist')) | |
| }); | |
| // Copy Data | |
| gulp.task('data', function() { | |
| gulp.src(data_dir) | |
| .pipe(gulp.dest('dist/data')) | |
| }); | |
| // Watch | |
| gulp.task('watch', function(){ | |
| gulp.watch(js_edge_dir, ['js-edge']); | |
| gulp.watch(js_babel_src, ['js-babel']); | |
| gulp.watch(html_dir, ['html']); | |
| }); | |
| // Default Task | |
| gulp.task('default', [ | |
| 'js-edge' | |
| , 'js-babel' | |
| , 'html' | |
| , 'data' | |
| , 'watch' | |
| ]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <button id="btn">Get JSON Async</button> | |
| <div id="json"></div> | |
| <script src="js/all.edge.js"></script> | |
| <!--<script src="js/all.babel.js"></script>--> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var gulp = require('gulp'); | |
| var browserify = require('browserify'); | |
| var babelify= require('babelify'); | |
| var util = require('gulp-util'); | |
| var buffer = require('vinyl-buffer'); | |
| var source = require('vinyl-source-stream'); | |
| var concat = require('gulp-concat'); | |
| var rename = require('gulp-rename'); | |
| var htmlmin = require('gulp-html-minifier'); | |
| var sourcemaps = require('gulp-sourcemaps'); | |
| var js_edge_dir = [ | |
| 'src/app.js' | |
| ]; | |
| var js_babel_src = | |
| 'src/app.js' | |
| ; | |
| var html_dir = [ | |
| 'src/**/*.html' | |
| ]; | |
| var data_dir = [ | |
| 'src/bigdata.json' | |
| ]; | |
| // Edge Concatenate | |
| gulp.task('js-edge', function () { | |
| return gulp.src(js_edge_dir) | |
| .pipe(concat('all.edge.js')) | |
| .pipe(gulp.dest('dist/js')) | |
| ; | |
| }); | |
| // Babel & Concatenate | |
| gulp.task('js-babel', function () { | |
| return browserify(js_babel_src, { debug: true }) | |
| .add(require.resolve('babel/polyfill')) | |
| .transform(babelify) | |
| .bundle() | |
| .on('error', util.log.bind(util, 'Browserify Error')) | |
| .pipe(source('all.babel.js')) | |
| .pipe(buffer()) | |
| .pipe(sourcemaps.init({loadMaps: true})) | |
| .pipe(sourcemaps.write('./')) | |
| .pipe(gulp.dest('./dist/js')); | |
| }); | |
| // Minify HTML | |
| gulp.task('html', function() { | |
| gulp.src(html_dir) | |
| .pipe(htmlmin({collapseWhitespace: true})) | |
| .pipe(gulp.dest('dist')) | |
| }); | |
| // Copy Data | |
| gulp.task('data', function() { | |
| gulp.src(data_dir) | |
| .pipe(gulp.dest('dist/data')) | |
| }); | |
| // Watch | |
| gulp.task('watch', function(){ | |
| gulp.watch(js_edge_dir, ['js-edge']); | |
| gulp.watch(js_babel_src, ['js-babel']); | |
| gulp.watch(html_dir, ['html']); | |
| }); | |
| // Default Task | |
| gulp.task('default', [ | |
| 'js-edge' | |
| , 'js-babel' | |
| , 'html' | |
| , 'data' | |
| , 'watch' | |
| ]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <button id="btn">Get JSON Async</button> | |
| <div id="json"></div> | |
| <script src="js/all.edge.js"></script> | |
| <!--<script src="js/all.babel.js"></script>--> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| async function xhrAsync(/* String */ url) { | |
| let request = new XMLHttpRequest(); | |
| await request.open('GET', url, false); | |
| await request.send(); | |
| if (request.status == 200) { | |
| return request.responseText; | |
| } else { | |
| throw Error(request.statusText); | |
| } | |
| } | |
| window.addEventListener("load", function() { | |
| const btn = document.getElementById('btn'); | |
| btn.onclick = async () => { | |
| const json = document.getElementById('json'); | |
| try { | |
| const /* String */ response = await xhrAsync('data/bigdata.json'); | |
| json.innerText = response; | |
| } catch (/* String */ e) { | |
| json.innerText = e; | |
| } | |
| }; | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "count": 567, | |
| "next": "http://marsweather.ingenology.com/v1/archive/?terrestrial_date_end=2015-09-30&terrestrial_date_start=2012-01-01&page=2", | |
| "previous": null, | |
| "results": [ | |
| { | |
| "terrestrial_date": "2015-09-30", | |
| "sol": 1120, | |
| "ls": 48.0, | |
| "min_temp": -80.0, | |
| "min_temp_fahrenheit": -112.0, | |
| "max_temp": -24.0, | |
| "max_temp_fahrenheit": -11.2, | |
| "pressure": 900.0, | |
| "pressure_string": "Higher", | |
| "abs_humidity": null, | |
| "wind_speed": null, | |
| "wind_direction": "--", | |
| "atmo_opacity": "Sunny", | |
| "season": "Month 2", | |
| "sunrise": "2015-09-30T11:12:00Z", | |
| "sunset": "2015-09-30T22:59:00Z" | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "count": 567, | |
| "next": "http://marsweather.ingenology.com/v1/archive/?terrestrial_date_end=2015-09-30&terrestrial_date_start=2012-01-01&page=2", | |
| "previous": null, | |
| "results": [ | |
| { | |
| "terrestrial_date": "2015-09-30", | |
| "sol": 1120, | |
| "ls": 48.0, | |
| "min_temp": -80.0, | |
| "min_temp_fahrenheit": -112.0, | |
| "max_temp": -24.0, | |
| "max_temp_fahrenheit": -11.2, | |
| "pressure": 900.0, | |
| "pressure_string": "Higher", | |
| "abs_humidity": null, | |
| "wind_speed": null, | |
| "wind_direction": "--", | |
| "atmo_opacity": "Sunny", | |
| "season": "Month 2", | |
| "sunrise": "2015-09-30T11:12:00Z", | |
| "sunset": "2015-09-30T22:59:00Z" | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment