strues/retinajs

can't get to work using zurb template structure 6.2.2

nikkijd opened this issue · 1 comments

nikkijd commented

Hi hope someone can help me i'm kind of new building projects using nodejs and here i cam across this issue. It's clearly the script is not working even thou i don't have error in the console. When i try to switch to unminified version of retina script i get the following error.

Thank you

retina.js: Uncaught ReferenceError: exports is not defined

my retina image is already there.
here is my structure and it's pretty much the default structure when
when typing this command '$ foundation new --framework sites --template zurb'

bower_components
etc
src
 -assets
 -pages
 -partials
 -layouts
node_modules
dist

html

<img src="{{root}}assets/img/logo-main.png" data-rjs="{{root}}assets/img/logo-main@2x.png" />
or 
<img src="{{root}}assets/img/logo-main.png" data-rjs="2" />

src/partial/default.html

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="stylesheet" href="{{root}}assets/css/app.css" />

  </head>
  <body>
    <div class="main-container">

      {{> header}}

      {{> body}}

      {{> footer}}

    </div> <!-- main-container -->
    <script type="text/javascript" src="{{root}}assets/js/app.js"></script>
  </body>
</html>

config.yml

# Your project's server will run on localhost:xxxx at this port
PORT: 8889

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"

# UnCSS will use these settings
UNCSS_OPTIONS:
  html:
    - "src/**/*.html"
  ignore:
    - !!js/regexp .foundation-mq
    - !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
  # Path to dist folder
  dist: "dist"  
  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "src/assets/**/*"
    - "!src/assets/{img,js,scss}/**/*"
  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "bower_components/foundation-sites/scss"
    - "bower_components/motion-ui/src"
  # Paths to JavaScript libraries, which are compined into one file
  javascript:
    # Libraries requried by Foundation
    - "bower_components/jquery/dist/jquery.js"
    - "bower_components/what-input/what-input.js"
    # Core Foundation files
    - "bower_components/foundation-sites/js/foundation.core.js"
    - "bower_components/foundation-sites/js/foundation.util.*.js"
    # Individual Foundation components
    # If you aren't using a component, just remove it from the list
    - "bower_components/foundation-sites/js/foundation.abide.js"
    - "bower_components/foundation-sites/js/foundation.accordion.js"
    - "bower_components/foundation-sites/js/foundation.accordionMenu.js"
    - "bower_components/foundation-sites/js/foundation.drilldown.js"
    - "bower_components/foundation-sites/js/foundation.dropdown.js"
    - "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
    - "bower_components/foundation-sites/js/foundation.equalizer.js"
    - "bower_components/foundation-sites/js/foundation.interchange.js"
    - "bower_components/foundation-sites/js/foundation.magellan.js"
    #- "bower_components/foundation-sites/js/foundation.offcanvas.js"
    - "bower_components/foundation-sites/js/foundation.orbit.js"
    - "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
    - "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
    - "bower_components/foundation-sites/js/foundation.reveal.js"
    - "bower_components/foundation-sites/js/foundation.slider.js"
    - "bower_components/foundation-sites/js/foundation.sticky.js"
    - "bower_components/foundation-sites/js/foundation.tabs.js"
    - "bower_components/foundation-sites/js/foundation.toggler.js"
    - "bower_components/foundation-sites/js/foundation.tooltip.js"
    # Capcvet bower dependencies 
    - "bower_components/slick-carousel/slick/slick.js"
    - "bower_components/retinajs/dist/retina.min.js"
    # Paths to your own project code are here
    - "src/assets/js/!(app).js"
    - "src/assets/js/app.js"

gulpfile.babel.js

'use strict';

import plugins  from 'gulp-load-plugins';
import yargs    from 'yargs';
import browser  from 'browser-sync';
import gulp     from 'gulp';
import panini   from 'panini';
import rimraf   from 'rimraf';
import sherpa   from 'style-sherpa';
import yaml     from 'js-yaml';
import fs       from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();

function loadConfig() {
  let ymlFile = fs.readFileSync('config.yml', 'utf8');
  return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
 gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
  return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    }))
    .pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
  panini.refresh();
  done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
  sherpa('src/styleguide/index.md', {
    output: PATHS.dist + '/styleguide.html',
    template: 'src/styleguide/template.html'
  }, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
  //return gulp.src('src/assets/scss/app.scss')
  return gulp.src('src/assets/scss/*.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    // Comment in the pipe below to run UnCSS in production
    //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
    .pipe($.if(PRODUCTION, $.cssnano()))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    //.pipe($.babel({}))
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, $.imagemin({
      progressive: true
    })))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init({
    server: PATHS.dist, port: PORT
  });
  done();
}

// Reload the browser with BrowserSync
function reload(done) {
  browser.reload();
  done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html').on('change', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss', sass);
  gulp.watch('src/assets/js/**/*.js').on('change', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
  gulp.watch('src/styleguide/**').on('change', gulp.series(styleGuide, browser.reload));
}

package.json

"devDependencies": {
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-register": "^6.7.2",
    "browser-sync": "^2.10.0",
    "gulp": "gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-babel": "^6.1.2",
    "gulp-cli": "^1.2.1",
    "gulp-concat": "^2.5.2",
    "gulp-cssnano": "^2.1.0",
    "gulp-extname": "^0.2.0",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^2.2.1",
    "gulp-load-plugins": "^1.1.0",
    "gulp-sass": "^2.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.2.0",
    "gulp-uncss": "^1.0.1",
    "js-yaml": "^3.4.6",
    "panini": "^1.3.0",
    "rimraf": "^2.4.3",
    "style-sherpa": "^1.0.0",
    "yargs": "^3.8.0"
  },

screenshot
screen shot 2016-07-15 at 11 05 12 pm

screen shot 2016-07-15 at 11 22 11 pm

It's clearly not switching to @2x image after a refresh and even test it on actual ipad.

nikkijd commented

went back to v2.0.0 and works best at the moment.