Use img srcset for retina images

gulpfile.js

@@ -1,72 +1,91 @@
 'use strict';
 
 var gulp = require('gulp');
-var $ = require('gulp-load-plugins')();
-var cssnano = require('cssnano');
+var gulpIf = require('gulp-if');
+var gulpRev = require('gulp-rev');
+var gulpRevCollector = require('gulp-rev-collector');
+var gulpRevReplace = require('gulp-rev-replace');
+var gulpUglify = require('gulp-uglify');
+var gulpUniqueFiles = require('gulp-unique-files');
+var gulpUseRef = require('gulp-useref');
+var gulpCleanCSS = require('gulp-clean-css');
+var gulpResponsive = require('gulp-responsive');
+var gulpImgRetina = require('gulp-img-retina');
+var del = require('del');
 
 var dirs = {
   public: 'public',
   screenshots: 'public/build/screenshots'
 };
 
-gulp.task('useref', ['screenshot'], function(){
-  var assets = $.useref.assets({
+var retinaSuffix = {
+  1: '',
+  2: '@2x'
+};
+
+gulp.task('useref', ['screenshot'], function() {
+  var assets = gulpUseRef.assets({
     searchPath: 'public'
   });
 
   return gulp.src('public/**/*.html')
     .pipe(assets)
-    .pipe($.uniqueFiles())
-    .pipe($.if('*.css', $.postcss([
-      cssnano()
-    ])))
-    .pipe($.if('*.js', $.uglify()))
-    .pipe($.rev())
+    .pipe(gulpUniqueFiles())
+    .pipe(gulpIf('*.js', gulpCleanCSS()))
+    .pipe(gulpIf('*.js', gulpUglify()))
+    .pipe(gulpRev())
     .pipe(assets.restore())
-    .pipe($.useref())
-    .pipe($.revReplace({
+    .pipe(gulpUseRef())
+    .pipe(gulpRevReplace({
       prefix: '/'
     }))
     .pipe(gulp.dest('public'));
 });
 
-gulp.task('screenshot:rev', function(){
+gulp.task('screenshot:clean', function() {
+  return del([dirs.screenshots + '/**/*']);
+});
+
+gulp.task('screenshot:rev', ['screenshot:clean'], function() {
   return gulp.src('public/themes/screenshots/*.png')
-    .pipe($.rev())
+    .pipe(gulpRev())
     .pipe(gulp.dest(dirs.screenshots))
-    .pipe($.rev.manifest())
+    .pipe(gulpRev.manifest())
     .pipe(gulp.dest(dirs.screenshots));
 });
 
-gulp.task('screenshot:resize', ['screenshot:rev'], function(){
+gulp.task('screenshot:revreplace', ['screenshot:rev'], function() {
+  return gulp.src([dirs.screenshots + '/rev-manifest.json', 'public/themes/index.html'])
+    .pipe(gulpRevCollector({
+      replaceReved: true,
+      dirReplacements: {
+        '/themes/screenshots': '/build/screenshots'
+      }
+    }))
+    .pipe(gulpImgRetina({
+      suffix: retinaSuffix
+    }))
+    .pipe(gulp.dest('public/themes'));
+});
+
+gulp.task('screenshot:resize', ['screenshot:rev'], function() {
   return gulp.src(dirs.screenshots + '/*.png')
-    .pipe($.responsive({
+    .pipe(gulpResponsive({
       '*.png': [
         {
-          width: 400,
-          progressive: true
+          width: 400
         },
         {
-          progressive: true,
           rename: {
-            suffix: '@2x'
+            suffix: retinaSuffix[2]
           }
         }
       ]
+    }, {
+      progressive: true
     }))
     .pipe(gulp.dest(dirs.screenshots));
 });
 
-gulp.task('screenshot:revreplace', ['screenshot:rev'], function(){
-  return gulp.src([dirs.screenshots + '/rev-manifest.json', 'public/themes/index.html'])
-    .pipe($.revCollector({
-      replaceReved: true,
-      dirReplacements: {
-        '/themes/screenshots': '/build/screenshots'
-      }
-    }))
-    .pipe(gulp.dest('public/themes'));
-});
-
 gulp.task('screenshot', ['screenshot:rev', 'screenshot:resize', 'screenshot:revreplace']);
-gulp.task('default', ['useref', 'screenshot']);
+gulp.task('default', ['useref', 'screenshot']);

package.json

@@ -12,32 +12,32 @@
   },
   "dependencies": {
     "cheerio": "^0.20.0",
-    "hexo": "hexojs/hexo",
-    "hexo-deployer-git": "^0.1.0",
+    "hexo": "github:hexojs/hexo",
+    "hexo-deployer-git": "^0.3.1",
     "hexo-generator-archive": "^0.1.4",
     "hexo-generator-feed": "^1.1.0",
     "hexo-generator-sitemap": "^1.1.2",
-    "hexo-renderer-jade": "^0.3.0",
+    "hexo-renderer-jade": "^0.4.1",
     "hexo-renderer-marked": "^0.2.10",
     "hexo-renderer-stylus": "^0.3.1",
     "hexo-server": "^0.2.0",
     "lodash": "^4.5.1",
     "lunr": "^0.6.0"
   },
   "devDependencies": {
-    "cssnano": "^3.5.2",
+    "del": "^3.0.0",
     "eslint": "^4.3.0",
     "eslint-config-hexo": "^2.0.0",
     "gulp": "^3.9.1",
+    "gulp-clean-css": "^3.7.0",
     "gulp-if": "^2.0.0",
-    "gulp-load-plugins": "^1.2.0",
-    "gulp-postcss": "^6.1.0",
-    "gulp-responsive": "^2.1.0",
+    "gulp-img-retina": "0.0.4",
+    "gulp-responsive": "^2.8.0",
     "gulp-rev": "^6.0.1",
     "gulp-rev-collector": "^1.0.2",
     "gulp-rev-replace": "^0.4.3",
     "gulp-uglify": "^1.5.3",
     "gulp-unique-files": "^0.1.2",
     "gulp-useref": "^2.1.0"
   }
-}
+}

themes/navy/layout/partial/after_footer.swig

@@ -1,11 +1,9 @@
 <!-- Scripts -->
 <!-- build:js build/js/main.js -->
 {{ js('js/lang_select') }}
-{{ js('js/scrollingelement') }}
 {{ js('js/toc') }}
 {{ js('js/mobile_nav') }}
 <!-- endbuild -->
-<script src="https://cdn.jsdelivr.net/retinajs/1.3.0/retina.min.js" async></script>
 {% if page.layout === 'plugins' %}
 <!-- Plugin search -->
 <script src="https://cdn.jsdelivr.net/lunr/0.6.0/lunr.min.js"></script>