setting browserify with gullp and request to api github ok

Author: carl32crc

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["es2015"]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

js/githubusers.js renamed to dev/js/app.js

@@ -1,48 +1,24 @@
-
-const getData = (method, url) => {
-
-	return new Promise( (resolve, reject) => {
-
-		let xhr = new XMLHttpRequest();
-
-		xhr.open(method, url, true);
-
-		xhr.addEventListener('load', e => {
-
-			let response = {
-				status: e.target.status,
-				response: JSON.parse(e.target.response)
-			};
-
-			resolve(response);
-		});
-
-		xhr.addEventListener('error', e => {
-			reject(e.target);
-		});
-
-		xhr.send();
-	});
-}
+import getDataFromApi from './getDataFromApi.js';
 
 let message = document.getElementById('message-error'),
 	userGit = document.getElementById('userGit'),
 	search  = document.getElementById('search');
 
-
 	search.addEventListener('click', () => {
 
+		console.log('hola');
+
 		let url = `https://api.github.com/users/${userGit.value}`;
 
-		getData('GET', url, true)
+		getDataFromApi('GET', url, true)
 			.then( resolve => {
 				resolveRequest(resolve);
 			})
 			.catch( error => {
 				console.log(error);
 			})
 
-		getData('GET', `${url}/repos`)
+		getDataFromApi('GET', `${url}/repos`)
 			.then( resolve => {
 				resolveRequest(resolve);
 			})

dev/js/getDataFromApi.js

@@ -0,0 +1,28 @@
+
+const getDataFromApi = (method, url) => {
+
+	return new Promise( (resolve, reject) => {
+
+		let xhr = new XMLHttpRequest();
+
+		xhr.open(method, url, true);
+
+		xhr.addEventListener('load', e => {
+
+			let response = {
+				status: e.target.status,
+				response: JSON.parse(e.target.response)
+			};
+
+			resolve(response);
+		});
+
+		xhr.addEventListener('error', e => {
+			reject(e.target);
+		});
+
+		xhr.send();
+	});
+}
+
+module.exports = getDataFromApi;

gulpfile.babel.js

@@ -0,0 +1,54 @@
+import gulp from 'gulp';
+import browserify from 'browserify';
+import browserSync from 'browser-sync';
+import sass from 'gulp-sass';
+import postcss from 'gulp-postcss';
+import cssnano from 'cssnano';
+import source from 'vinyl-source-stream';
+import babelify from 'babelify';
+import gutil from 'gulp-util';
+
+const server = browserSync.create();
+
+const postCSSPlugins = [
+  cssnano({
+    autoprefixer: {
+      add: true
+    }
+  })
+];
+
+gulp.task('es6', function() {
+  browserify({ debug: true })
+    .transform(babelify)
+    .require(['./dev/js/app.js', './dev/js/getDataFromApi.js'], { entry: true })
+    .bundle()
+    .on('error',gutil.log)
+    .pipe(source('bundle.js'))
+      .pipe(gulp.dest('./public/js/'));
+});
+
+
+gulp.task('build', function() {
+  gulp.start(['es6']);
+  return;
+});
+
+gulp.task('sass', () =>
+  gulp.src('./dev/scss/styles.scss')
+    .pipe(sass())
+    .pipe(postcss(postCSSPlugins))
+    .pipe(gulp.dest('./public/css'))
+    .pipe(server.stream({match: '**/*.css'}))
+);
+
+gulp.task('default', () => {
+  server.init({
+    server: {
+      baseDir: './public',
+      ignore: '.git'
+    }
+  });
+  gulp.watch('./dev/js/*.js', ['es6', server.reload])
+  gulp.watch('./dev/scss/**/*.scss', ['sass']);
+});

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "users-github",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "prestart": "npm install",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Carlos Ruiz",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.25.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babelify": "^7.3.0",
+    "browser-sync": "^2.18.13",
+    "browserify": "^14.4.0",
+    "cssnano": "^3.10.0",
+    "gulp": "^3.9.1",
+    "gulp-postcss": "^7.0.0",
+    "gulp-sass": "^3.1.0",
+    "gulp-util": "^3.0.8",
+    "vinyl-source-stream": "^1.1.0"
+  }
+}

index.html renamed to public/index.html

@@ -8,6 +8,6 @@
 	<input type="text" id="userGit" >
 	<button id="search" >Search</button>
 	<div id="message-error"></div>
-	<script type="text/javascript" src="js/githubusers.js"></script>
+	<script type="text/javascript" src="js/bundle.js"></script>
 </body>
 </html>