Merge pull request #973 from passy/build-chain

Gulp build chain

Fix #972

.gitignore

 node_modules
 /bower_components
+/dist

.travis.yml

+# You must sign into travis-ci.org and set the commit hook on your project for travis to
+# run on your project. The secure: variable must be generated by running `travis encrypt`
+# on a github oauth key that you can generate using curl.
+
+language:
+    node_js
+node_js:
+    - 0.10
+notifications:
+    irc: "irc.freenode.org#tastejs"
+branches:
+    only:
+        - master
+env:
+    global:
+        # GH_OAUTH_TOKEN is the oauth token generated as described at
+        # https://help.github.com/articles/creating-an-oauth-token-for-command-line-use
+        #
+        # curl -u 'username' -d '{"scopes":["repo"],"note":"push to gh-pages from travis"}' https://api.github.com/authorizations
+        #
+        # It must be encrypted using the travis gem
+        # http://about.travis-ci.org/docs/user/build-configuration/#Secure-environment-variables
+        #
+        # travis encrypt GH_OAUTH_TOKEN=XXXXXXXXXXXXXXX
+        #
+        # User specific env variables
+        - secure: "fHgfjMpYuliwMr2QLnjYZExIViNrxprf9dhXRBLZ6P9Hz7P6m1BMYrI/xEG8X+fFbCi0+n3AXh8SEMHi9ou/Pty/cx12z4w/z3B2BHMxh4XBwpZHs+AB4IXkLiwwWoP4QFy4vTipgYnMDMq9CRhlRbhZEpenQBmaTEc472By1uM="
+        - GH_OWNER: tastejs
+        - GH_PROJECT_NAME: todomvc
+
+before_script:
+    # install dependencies
+    - npm install -g gulp
+script:
+    # We want to gate on passing tests and a successful build
+    - gulp
+after_success:
+    # Any command that using GH_OAUTH_TOKEN must pipe the output to /dev/null to not expose your oauth token
+    - git submodule add -b gh-pages https://${GH_OAUTH_TOKEN}@github.com/${GH_OWNER}/${GH_PROJECT_NAME} site > /dev/null 2>&1
+    - cd site
+    - if git checkout gh-pages; then git checkout -b gh-pages; fi
+    - git rm -r .
+    - cp -R ../dist/* .
+    - cp ../dist/.* .
+    - git add -f .
+    - git config user.email "travis@rdrei.net"
+    - git config user.name "TasteBot"
+    - git commit -am "update the build files for gh-pages [ci skip]"
+    # Any command that using GH_OAUTH_TOKEN must pipe the output to /dev/null to not expose your oauth token
+    - git push https://${GH_OAUTH_TOKEN}@github.com/${GH_OWNER}/${GH_PROJECT_NAME} HEAD:gh-pages > /dev/null 2>&1

gulpfile.js

+'use strict';
+
+// Include Gulp & Tools We'll Use
+var gulp = require('gulp');
+var $ = require('gulp-load-plugins')();
+var del = require('del');
+var runSequence = require('run-sequence');
+var pagespeed = require('psi');
+
+var AUTOPREFIXER_BROWSERS = [
+  'ie >= 10',
+  'ie_mob >= 10',
+  'ff >= 30',
+  'chrome >= 34',
+  'safari >= 7',
+  'opera >= 23',
+  'ios >= 7',
+  'android >= 4.4',
+  'bb >= 10'
+];
+
+// Lint JavaScript
+gulp.task('jshint', function () {
+  return gulp.src('site-assets/*.js')
+    .pipe($.jshint())
+    .pipe($.jshint.reporter('jshint-stylish'));
+});
+
+// Optimize Images
+gulp.task('images', function () {
+  return gulp.src('site-assets/*.{png,jpg,svg}')
+    .pipe($.cache($.imagemin({
+      progressive: true,
+      interlaced: true
+    })))
+    .pipe(gulp.dest('dist/site-assets'))
+    .pipe($.size({title: 'images'}));
+});
+
+// Copy All Files At The Root Level (app)
+gulp.task('copy', function () {
+  return gulp.src([
+    'architecture-examples/**',
+    'dependency-examples/**',
+    'vanilla-examples/**',
+    'labs/**',
+    'learn.json',
+    'CNAME',
+    '.nojekyll'
+  ], {
+    dot: true,
+    base: './'
+  }).pipe(gulp.dest('dist'))
+    .pipe($.size({title: 'copy'}));
+});
+
+// Compile and Automatically Prefix Stylesheets
+gulp.task('styles', function () {
+  // For best performance, don't add Sass partials to `gulp.src`
+  return gulp.src([
+      'site-assets/*.css',
+    ])
+    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
+    .pipe(gulp.dest('dist/site-assets'))
+    .pipe($.size({title: 'styles'}))
+    .pipe(gulp.dest('.tmp/site-assets'));
+});
+
+// Scan Your HTML For Assets & Optimize Them
+gulp.task('html', function () {
+  var assets = $.useref.assets({searchPath: '{.tmp,.}'});
+
+  return gulp.src('index.html')
+    .pipe(assets)
+    // Concatenate And Minify JavaScript
+    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
+    // Concatenate And Minify Styles
+    .pipe($.if('*.css', $.csso()))
+    .pipe(assets.restore())
+    .pipe($.useref())
+    // Minify Any HTML
+    .pipe($.if('*.html', $.minifyHtml()))
+    // Output Files
+    .pipe(gulp.dest('dist'))
+    .pipe($.size({title: 'html'}));
+});
+
+// Clean Output Directory
+gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
+
+// Build Production Files, the Default Task
+gulp.task('default', ['clean'], function (cb) {
+  runSequence('styles', ['jshint', 'html', 'images', 'copy'], cb);
+});
+
+// Run PageSpeed Insights
+// Update `url` below to the public URL for your site
+gulp.task('pagespeed', pagespeed.bind(null, {
+  // By default, we use the PageSpeed Insights
+  // free (no API key) tier. You can use a Google
+  // Developer API key if you have one. See
+  // http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
+  url: 'https://todomvc.com',
+  strategy: 'mobile'
+}));

index.html

@@ -15,8 +15,10 @@
 		<meta property="og:image" content="https://raw.github.com/tastejs/todomvc/gh-pages/site-assets/screenshot.png">
 		<meta property="og:description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more">
 		<link rel="shortcut icon" href="site-assets/favicon.ico">
+		<!-- build:css site-assets/main.min.css -->
 		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
 		<link rel="stylesheet" href="site-assets/main.css">
+		<!-- endbuild -->
 	</head>
 	<body>
 		<div class="container">
@@ -331,9 +333,11 @@
 				</p>
 			</footer>
 		</div>
+		<!-- build:js site-assets/main.min.js -->
 		<script src="bower_components/jquery/dist/jquery.min.js"></script>
 		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 		<script src="site-assets/main.js"></script>
+		<!-- endbuild -->
 		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 		<script>(function(){var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
 		<script>var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>

package.json

+{
+  "devDependencies": {
+    "del": "^0.1.1",
+    "gulp": "^3.8.5",
+    "gulp-autoprefixer": "^0.0.8",
+    "gulp-cache": "^0.2.0",
+    "gulp-csso": "^0.2.9",
+    "gulp-if": "^1.2.1",
+    "gulp-imagemin": "^1.0.0",
+    "gulp-jshint": "^1.6.3",
+    "gulp-load-plugins": "^0.5.3",
+    "gulp-minify-html": "^0.1.4",
+    "gulp-rename": "^1.2.0",
+    "gulp-replace": "^0.4.0",
+    "gulp-size": "^1.0.0",
+    "gulp-uglify": "^0.3.1",
+    "gulp-uncss": "^0.4.4",
+    "gulp-useref": "^0.6.0",
+    "jshint-stylish": "^0.4.0",
+    "psi": "^0.1.1",
+    "run-sequence": "^0.3.6"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "private": true
+}

site-assets/main.css

@@ -11,10 +11,6 @@ body {
 	width: auto;
 	background: #fafafa;
 	color: #353535;
-	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	-o-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -126,29 +122,17 @@ header nav a:not(:last-child) {
 	list-style: none;
 	margin: 0;
 	padding: 0;
-	-webkit-columns: 1;
-	-moz-columns: 1;
-	-ms-columns: 1;
-	-o-columns: 1;
 	columns: 1;
 	font-size: 17px;
 }
 
 .applist li {
 	padding: 10px 0;
-	-webkit-column-break-inside: avoid;
-	-moz-column-break-inside: avoid;
-	-ms-column-break-inside: avoid;
-	-o-column-break-inside: avoid;
 	column-break-inside: avoid;
 }
 
 .applist a {
 	position: relative; /* popover */
-	-webkit-column-break-inside: avoid;
-	-moz-column-break-inside: avoid;
-	-ms-column-break-inside: avoid;
-	-o-column-break-inside: avoid;
 	column-break-inside: avoid;
 }
 
@@ -198,7 +182,6 @@ header nav a:not(:last-child) {
 .collapsed {
 	overflow: hidden;
 	max-height: 0;
-	-webkit-transition: max-height 0.7s ease-out;
 	transition: max-height 0.7s ease-out;
 }
 
@@ -208,7 +191,6 @@ header nav a:not(:last-child) {
 
 #news-expander:checked ~ .collapsed {
 	max-height: 999px;
-	-webkit-transition: max-height 0.7s ease-in;
 	transition: max-height 0.7s ease-in;
 }
 
@@ -336,9 +318,6 @@ a.zocial {
 	text-align: center;
 	text-decoration: none;
 	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 	position: relative;
 	border-radius: .3em;
@@ -346,10 +325,6 @@ a.zocial {
 
 @media (max-width: 480px) {
 	body .applist {
-		-webkit-columns: auto !important;
-		-moz-columns: auto !important;
-		-ms-columns: auto !important;
-		-o-columns: auto !important;
 		columns: auto !important;
 	}
 
@@ -381,20 +356,12 @@ a.zocial {
 
 @media (min-width: 480px) {
 	.applist {
-		-webkit-columns: 2;
-		-moz-columns: 2;
-		-ms-columns: 2;
-		-o-columns: 2;
 		columns: 2;
 	}
 }
 
 @media (min-width: 640px) and (max-width: 770px) {
 	.applist {
-		-webkit-columns: 3;
-		-moz-columns: 3;
-		-ms-columns: 3;
-		-o-columns: 3;
 		columns: 3;
 	}
 }
@@ -403,10 +370,6 @@ a.zocial {
 @media (min-width: 771px) {
 	.js,
 	.ctojs {
-		-webkit-columns: 4;
-		-moz-columns: 4;
-		-ms-columns: 4;
-		-o-columns: 4;
 		columns: 4;
 	}
 }