turn code examples into javascript and update readme

README.md

@@ -4,7 +4,7 @@
 ### What it does
 * [Jade](http://jade-lang.com) files to HTML
 * [Stylus](http://learnboost.github.io/stylus) files to CSS
-* [CoffeeScript](http://coffeescript.org/) files to Javascript through [browserify](http://browserify.org/)
+* [ES6+ JavaScript](babeljs.io) files to ES5 Javascript through [browserify](http://browserify.org/)
     * You are able to use 'require' in your client-side code
 * Serves your static files to localhost:9001
 * Reloads your browser with LiveReload when files change
@@ -18,7 +18,7 @@
  npm install
  npm start
  open http://localhost:9001 in your browser
-````
+```
 
 ## CLI Commands
 * npm install
@@ -28,6 +28,7 @@
 * npm run build
     * Builds everything
 
+# Production build
 Minification, uglification and other tasks you're expected to run before deploying your product can be made by running the build command with env variable NODE_ENV set to "production"
 
     NODE_ENV=production npm run build
@@ -37,23 +38,6 @@ Minification, uglification and other tasks you're expected to run before deployi
   It should be possible to delete directory completely and after **npm start** or **npm run build** everything should be as they were before the deletion.
 * All backend dependencies should be installed with **npm**. Browser dependencies should be installed with **bower** or with **npm**.
 
-### Using JavaScript instead of CoffeeScript
-Remove coffeeify transform from package.json file (browserify.transform field)
-```diff
-    "transform": [
--     "coffeeify",
-      "debowerify",
-      "deamdify"
-    ]
-```
-
-and change the ".coffee" extension to ".js" from gulpfile.coffee
-```diff
-config =
-  scripts:
--   source: './src/coffee/main.coffee'
--   extensions: ['.coffee']
-+   source: './src/js/main.js'
-+   extensions: ['.js']
-```
-You also can change the directory name to scripts or what ever.
+# FAQ
+### I want to use CoffeeScript instead of JavaScript
+Check out the [coffee branch](https://github.com/leonidas/gulp-project-template/tree/coffee)

gulpfile.js

@@ -6,7 +6,7 @@ var duration = require('gulp-duration');
 var gulp = require('gulp');
 var gutil = require('gulp-util');
 var jade = require('gulp-jade');
-var notify = require('gulp-notify');
+var notifier = require('node-notifier');
 var prefix = require('gulp-autoprefixer');
 var source = require('vinyl-source-stream');
 var sourcemaps = require('gulp-sourcemaps');
@@ -19,9 +19,9 @@ var production = process.env.NODE_ENV === 'production';
 
 var config = {
   scripts: {
-    source: './src/coffee/main.coffee',
-    extensions: ['.coffee'],
+    source: './src/js/main.js',
     destination: './public/js/',
+    extensions: ['.jsx'],
     filename: 'bundle.js'
   },
   templates: {
@@ -52,7 +52,7 @@ var browserifyConfig = {
 function handleError(err) {
   gutil.log(err);
   gutil.beep();
-  notify({
+  notifier.notify({
     title: 'Compile Error',
     message: err.message
   });

package.json

@@ -15,19 +15,20 @@
     "gulp",
     "template"
   ],
-  "dependencies": {},
+  "dependencies": {
+    "lodash": "^3.9.1"
+  },
   "devDependencies": {
+    "babelify": "^6.1.1",
     "bower": "~1.3.5",
     "browser-sync": "^2.7.2",
     "browserify": "^10.2.1",
-    "coffeeify": "~0.7.0",
     "deamdify": "^0.1.1",
     "debowerify": "~0.9.1",
     "gulp": "~3.8.1",
     "gulp-autoprefixer": "1.0.1",
     "gulp-duration": "0.0.0",
     "gulp-jade": "~0.9.0",
-    "gulp-notify": "^2.2.0",
     "gulp-sourcemaps": "^1.3.0",
     "gulp-streamify": "0.0.5",
     "gulp-stylus": "~2.0.0",
@@ -36,14 +37,14 @@
     "karma": "~0.12.21",
     "karma-chrome-launcher": "~0.1.4",
     "karma-cli": "0.0.4",
-    "karma-coffee-preprocessor": "~0.2.1",
     "karma-jasmine": "~0.2.2",
+    "node-notifier": "^4.2.1",
     "vinyl-source-stream": "~1.0.0",
     "watchify": "^3.2.1"
   },
   "browserify": {
     "transform": [
-      "coffeeify",
+      "babelify",
       "debowerify",
       "deamdify"
     ]

src/coffee/main.coffee

@@ -1 +0,0 @@
-console.log 'foobar'

src/js/main.js

@@ -0,0 +1,33 @@
+'use strict';
+
+import {partialRight, invoke} from 'lodash';
+
+Promise.all([
+  fetch('https://api.github.com/repos/leonidas/gulp-project-template'),
+  fetch('https://api.github.com/repos/leonidas/gulp-project-template/commits')
+])
+.then(partialRight(invoke, 'json'))
+.then(Promise.all.bind(Promise))
+.then(data => {
+
+  const [repository, commits] = data;
+  const {html_url, description, full_name} = repository;
+
+  const commitItems = commits.map(item => {
+    const {commit} = item;
+
+    return `
+      <li>
+        <span>${commit.message.replace(/\n/g, '<br />')}<span>
+        <br /><br />
+        <small>${commit.committer.name}</small>
+      </li>`;
+  });
+
+  document.body.innerHTML = `
+    <h1>${description}</h1>
+    <h2><a href="${html_url}">${full_name}</a></h2>
+    <ul>${commitItems.join('')}</ul>
+  `;
+});
+

src/stylus/style.styl

@@ -1,2 +1,23 @@
 body, html
   margin 0
+  padding 1em
+  font 14px/1.4 'Helvetica Neue', Helvetica, Arial
+  color #333
+
+li
+  margin 1em 0
+  padding 1em 0
+  border-bottom 1px solid #eee
+
+h1
+  margin-bottom 0
+
+h2
+  margin-top 0
+
+ul
+  margin-top 2em
+
+li
+  small
+    color #777