can't get to work using zurb template structure 6.2.2 #252

nikkijd · 2016-07-15T15:24:13Z

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

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

The text was updated successfully, but these errors were encountered:

nikkijd · 2016-08-26T04:18:08Z

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

nikkijd changed the title ~~PLEASE HELP ME: can't get to work using zurb template structure 6.2.2~~ can't get to work using zurb template structure 6.2.2 Jul 15, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

can't get to work using zurb template structure 6.2.2 #252

can't get to work using zurb template structure 6.2.2 #252

nikkijd commented Jul 15, 2016

nikkijd commented Aug 26, 2016

can't get to work using zurb template structure 6.2.2 #252

can't get to work using zurb template structure 6.2.2 #252

Comments

nikkijd commented Jul 15, 2016

nikkijd commented Aug 26, 2016