Add an initial Gulp build task

Based on Web Starter Kit

Add an initial Gulp build task
Based on Web Starter Kit
60d2e020 · Pascal Hartig · e3d28cb2 · 60d2e020 · 60d2e020 · 60d2e020
Commit 60d2e020 authored Aug 16, 2014 by Pascal Hartig
Show whitespace changes
Inline Side-by-side

Showing with 137 additions and 0 deletions

.gitignore .gitignore +1 -0

gulpfile.js gulpfile.js +105 -0

index.html index.html +4 -0

package.json package.json +27 -0

No files found.
--- a/.gitignore
+++ b/.gitignore
 node_modules
 /bower_components
+/dist
--- a/gulpfile.js
+++ b/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'
+}));
--- a/index.html
+++ b/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>

--- a/package.json
+++ b/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
+}