roots.io with gulp.js

gulpfiles.js

'use strict';


// TODO: better timing and size informations
// TODO: add sass sourcemaps
// TODO: bower wiredep

var gulp = require('gulp');
var del = require('del');
var $$ = require('gulp-load-plugins')();

var paths = {
  'src': 'assets/src',
  'dist': 'assets/dist'
};


// Clean
// --------------------
gulp.task('clean', function(cb){
  del([paths.dist], cb);
});


// Styles
// --------------------
gulp.task('styles', function(){

  return gulp.src(paths.src + '/sass/main.scss')
    .pipe($$.rubySass({style: 'compressed'}))
    .pipe($$.autoprefixer('last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12'))
    .pipe($$.minifyCss())
    .pipe($$.rename({suffix: '.min'}))
    // .pipe($$.size())
    .pipe(gulp.dest(paths.dist + '/css'));

});


// JSHint
// --------------------
gulp.task('jshint', function(){

    return gulp.src([
        paths.src + '/js/main.js',
        paths.src + '/js/app/**/*.js',
      ])
      .pipe($$.jshint('.jshintrc'))
      .pipe($$.jshint.reporter('jshint-stylish'));

});



// Application JS (build using requirejs)
// -------------------
gulp.task('appjs', function(){

  // Note: cannot use gulp.src()
  // see https://www.npmjs.org/package/gulp-requirejs
  $$.requirejs({
      baseUrl: paths.src + '/js/main.js',
      out: 'main.build.js',
      // mainConfigFile: paths.src + '/js/main.js',
      paths: {
          requireLib: '../../vendor/requirejs/require'
      },
      include: 'requireLib',
      preserveLicenseComments: false,
      useStrict: true,
      wrap: true
    })
    .pipe($$.uglify())
    // .pipe($$.size({title: "App-js", showFiles: true}))
    .pipe(gulp.dest(paths.dist + '/js'));

});

// Other JS (build using uglify)
// -------------------
gulp.task('otherjs', function(){

  return gulp.src([
      paths.src + '/js/*.js',
      '!' + paths.src + '/js/main.js',
      '!' + paths.src + '/js/app/**/*.js'
    ])
    .pipe($$.uglify())
    .pipe($$.rename({suffix: '.min'}))
    // .pipe($$.size({showFiles: true}))
    .pipe(gulp.dest(paths.dist + '/js'));

});

// Modernizr
// -------------------
gulp.task('modernizr', ['styles'], function() {

  gulp.src([
      paths.src + '/js/**/*.js',
      paths.src + '/vendor/**/*.{js,css}',
      '!' + paths.src + '/vendor/modernizr/**',
      paths.dist + '/css/**/*.css',
    ])
    .pipe($$.modernizr())
    .pipe($$.uglify())
    .pipe($$.rename({suffix: '.min'}))
    .pipe(gulp.dest(paths.dist + '/js'));

});


// Iconfonts
// -------------------
gulp.task('iconfonts', function(){

  var fontName = 'rp-icons';

  return gulp.src(paths.src + '/fonts/icons/*.svg')
    .pipe($$.iconfont({
      fontName: fontName,
      normalize: true,
      appendCodepoints: true
    }))
    .on('codepoints', function(codepoints, options){
      gulp.src(paths.src + '/sass/templates/_icons.scss')
        .pipe($$.consolidate('lodash', {
          glyphs: codepoints,
          fontName: fontName,
          fontPath: '../fonts',
          className: 'rpicon'
        }))
        .pipe(gulp.dest(paths.src + '/sass/components'));
    })
    .pipe(gulp.dest(paths.dist + '/fonts'));

});


// Images
// --------------------
gulp.task('images', function(){

    return gulp.src(paths.src + '/img/**/*')
    .pipe($$.cache($$.imagemin({
      progressive: true,
      interlaced: true
    })))
    .pipe($$.size())
    .pipe(gulp.dest(paths.dist + '/img'));

});


// Copy
// --------------------
gulp.task('copy', function(){

  return gulp.src([
    paths.src + '/fonts/*.*',
    paths.src + '/css/*.css'
    ], {
      base: paths.src + '/',
      dot: true
    }).pipe(gulp.dest(paths.dist + '/'));

});


// Revs
// --------------------
gulp.task('revs', ['styles', 'appjs', 'otherjs', 'modernizr', 'copy'], function(){

  return gulp.src(paths.dist + '/**/*.{js,css}')
    // Add the hash
    .pipe($$.rev())
    .pipe(gulp.dest(paths.dist))
    // Write the manifest
    .pipe($$.rev.manifest())
    .pipe(gulp.dest(paths.dist + '/'));

});


// Watch
// --------------------
gulp.task('watch', function(){
  $$.livereload.listen();

  gulp.watch([
    'lib/*.php',
    'templates/**/*.php',
    '*.php',
    '*.html',
    paths.dist + '/**',
    paths.src + '/js/**/*',
  ]).on('change', $$.livereload.changed);

  gulp.watch(paths.src + '/sass/**/*', ['styles']);
  gulp.watch(paths.src + '/js/**/*', ['jshint']);
  gulp.watch(paths.src + '/img/**/*', ['images']);
  gulp.watch(paths.src + '/fonts/icons/*', ['iconfonts']);

});

// Build
// --------------------
gulp.task('build', ['clean'], function () {
  gulp.start( ['jshint', 'styles', 'appjs', 'otherjs', 'modernizr', 'images', 'iconfonts', 'copy', 'revs'] );
});


// Dev
// --------------------
gulp.task('dev', ['clean'], function () {
  gulp.start(['jshint', 'styles', 'images', 'otherjs', 'iconfonts', 'copy', 'watch']);
});


// Default
// --------------------
gulp.task('default', ['clean'], function () {
  gulp.start('dev');
});

package.json

{
  "name": "roots",
  "version": "7.0.0",
  "author": "Ben Word <ben@benword.com>",
  "homepage": "http://roots.io",
  "repository": {
    "type": "git",
    "url": "git://github.com/roots/roots.git"
  },
  "bugs": {
    "url": "https://github.com/roots/roots/issues"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "http://opensource.org/licenses/MIT"
    }
  ],
  "scripts": {
    "postinstall": "node_modules/.bin/bower install"
  },
  "engines": {
    "node": ">= 0.10.0"
  },
  "devDependencies": {
    "bower": "~1.3.8",
    "del": "^0.1.2",
    "gulp": "^3.8.7",
    "gulp-autoprefixer": "0.0.8",
    "gulp-cache": "^0.2.1",
    "gulp-concat": "^2.3.4",
    "gulp-consolidate": "^0.1.2",
    "gulp-iconfont": "^0.1.1",
    "gulp-imagemin": "^1.0.0",
    "gulp-jshint": "^1.8.4",
    "gulp-livereload": "^2.1.0",
    "gulp-load-plugins": "^0.5.3",
    "gulp-minify-css": "^0.3.7",
    "gulp-modernizr": "https://github.com/doctyper/gulp-modernizr/tarball/develop",
    "gulp-notify": "^1.5.0",
    "gulp-rename": "^1.2.0",
    "gulp-requirejs": "^0.1.3",
    "gulp-rev": "^1.0.0",
    "gulp-ruby-sass": "^0.7.1",
    "gulp-size": "^1.0.0",
    "gulp-uglify": "^0.3.1",
    "jshint-stylish": "^0.4.0",
    "lodash": "^2.4.1"
  }
}

scripts.php

<?php
/**
 * Scripts and stylesheets
 * /lib/scripts.php
 *
 * Enqueue stylesheets in the following order:
 * 1. /theme/assets/css/main.css
 *
 * Enqueue scripts in the following order:
 * 1. jquery-1.11.1.min.js via Google CDN
 * 2. /theme/assets/js/vendor/modernizr.min.js
 * 3. /theme/assets/js/scripts.js (in footer)
 *
 * Google Analytics is loaded after enqueued scripts if:
 * - An ID has been defined in config.php
 * - You're not logged in as an administrator
 */
function roots_scripts() {
  /**
   * The build task in Grunt renames production assets with a hash
   * Read the asset names from assets-manifest.json
   */
  if (WP_ENV === 'development') {
    $assets = array(
      'css'       => '/assets/dist/css/main.min.css',
      'utils'     => '/assets/dist/js/utils.min.js',
      'modernizr' => '/assets/src/vendor/modernizr/modernizr.js',
      'jquery'    => '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js'
    );
  } else {
    $get_manifest = file_get_contents(get_template_directory() . '/assets/dist/rev-manifest.json');
    $manifest     = json_decode($get_manifest, true);
    $assets     = array(
      'css'       => '/assets/dist/css/main.min.css' . '?' . $manifest['css/main.min.css'],
      'utils'     => '/assets/dist/js/utils.min.js' . '?' . $manifest['js/utils.min.js'],
      'main'        => '/assets/dist/js/main.build.js' . '?' . $manifest['js/main.build.js'],
      'modernizr' => '/assets/dist/js/modernizr.min.js',
      'jquery'    => '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'
    );
  }

  wp_enqueue_style('roots_css', get_template_directory_uri() . $assets['css'], false, null);

  /**
   * jQuery is loaded using the same method from HTML5 Boilerplate:
   * Grab Google CDN's latest jQuery with a protocol relative URL; fallback to local if offline
   * It's kept in the header instead of footer to avoid conflicts with plugins.
   */
  if (!is_admin() && current_theme_supports('jquery-cdn')) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', $assets['jquery'], array(), null, false);
    add_filter('script_loader_src', 'roots_jquery_local_fallback', 10, 2);
  }

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  wp_enqueue_script('modernizr', get_template_directory_uri() . $assets['modernizr'], array(), null, false);
  wp_enqueue_script('jquery');
  wp_enqueue_script('roots-utils', get_template_directory_uri() . $assets['utils'], array(), null, true);

  if (WP_ENV !== 'development') {
    wp_enqueue_script('roots-main', get_template_directory_uri() . $assets['main'], array(), null, true);
  }
}
add_action('wp_enqueue_scripts', 'roots_scripts', 100);

// http://wordpress.stackexchange.com/a/12450
function roots_jquery_local_fallback($src, $handle = null) {
  static $add_jquery_fallback = false;

  if ($add_jquery_fallback) {
    echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/src/vendor/jquery/dist/jquery.min.js?1.11.1"><\/script>\')</script>' . "\n";
    $add_jquery_fallback = false;
  }

  if ($handle === 'jquery') {
    $add_jquery_fallback = true;
  }

  return $src;
}
add_action('wp_head', 'roots_jquery_local_fallback');

function roots_requirejs(){
  if (WP_ENV === 'development') {
    echo '<script data-main="'.get_template_directory_uri().'/assets/src/js/main" src="'.get_template_directory_uri().'/assets/src/vendor/requirejs/require.js"></script>';
  }
}
add_action('wp_footer', 'roots_requirejs');

/**
 * Google Analytics snippet from HTML5 Boilerplate
 */
function roots_google_analytics() { ?>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','<?php echo GOOGLE_ANALYTICS_ID; ?>');ga('send','pageview');
</script>

<?php }
if (GOOGLE_ANALYTICS_ID && !current_user_can('manage_options')) {
  add_action('wp_footer', 'roots_google_analytics', 20);
}

function roots_typekit() { ?>
  <script type="text/javascript">
  (function(d) {
    var config = {
      kitId: 'vkz7vgy',
      scriptTimeout: 3000
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

<?php }
add_action('wp_enqueue_scripts', 'roots_typekit', 100);