Fullpage.js won't show up in main.js or anywhere else

sage
1

i’m now stuck since 2 hours. i did

bower install --save fullpage.js

my bower.json looks like this:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap-sass-official": "3.3.5",
    "font-awesome": "fontawesome#~4.4.0",
    "fullpage.js": "~2.6.9",
    "modernizr": "2.8.2"
  },
  "overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    },
    "font-awesome": {
      "main": "./scss/font-awesome.scss"
    },
    "fullpage.js": {
      "main": [
        "jquery.fullPage.js",
        "jquery.fullPage.css",
        "jquery.fullPage.scss",
        "vendors/jquery.easings.min.js",
        "vendors/jquery.slimscroll.min.js"
      ]
    },
    "bootstrap-sass-official": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  }
}

fullpage.js bowser.json like this:

{
  "name": "fullpage.js",
  "homepage": "http://alvarotrigo.com/fullPage/",
  "authors": [
    "Alvaro Trigo https://github.com/alvarotrigo"
  ],
  "description": "Create  beautiful fullscreen scrolling websites",
  "main": [
    "jquery.fullPage.js",
    "jquery.fullPage.css",
    "jquery.fullPage.scss",
    "vendors/jquery.easings.min.js",
    "vendors/jquery.slimscroll.min.js"
  ],
  "keywords": [
    "jquery",
    "scrolling",
    "single_page",
    "one_page",
    "sliding"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests",
    "examples"
  ],
  "dependencies": {
      "jquery": ">=1.6.0"
    }
}

i also tried to put it into manifest.json:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "editor-style.css": {
      "files": [
        "styles/editor-style.scss"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    },
    "fullpage.js": {
      "bower": ["fullpage.js"]
    }
  },
  "config": {
    "devUrl": "http://dev.lemon.com"
  }
}

there is simply no fullpage.js or other dependencies showing up. neither in main.js or as single files. Also the css or scss seems to be ignored…

I tried other bower components, they work (font-awesome, moments)…

Any help?

2

You don’t mention running gulp after the bower install. I’m assuming you’ve done so?

3

sure. dozens of times. gulp, gulp && gulp watch…

4

It’s working here on a fresh Sage download. Just bower install --save fullpage.js and it’s included in main.js. Did you try without the overrides?

5

ok, i removed all “main” overrides (did that before). removed all manifest.json entries (did that before). did “bower uninstall fullpage.js” (did that before), removed it from the bower.json (did that before :wink:), did “bower install --save fullpage.js” (did that before)…

and now…

it’s working… :unamused:

so thank you, somehow :wink:

6

Sorry to revive this one but I am facing the same issue with the current Sage build (8.5.0)…

I performed a clean install (= no mods so far) and am trying to include fullPage.js – thus ran bower install --save fullpage.js, no errors and it shows up fine in my bower.json:

"dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.4",
    "fullpage.js": "^2.8.6"
  }

running gulp in order to refresh my main.js but nothing changes there, no mention of fullPage.js.

Did bower uninstall fullpage.js and re-installed just to make sure but to no avail.

Any ideas?

7

Strange enough: If I try and add the package-files manually in the manifest.json via

    {
  "dependencies": {
    "main.js": {
    "files": [
      "scripts/main.js"
    ],
    "vendor": [
      "bower_components/fullpage.js/dist/jquery.fullpage.js",
      "bower_components/fullpage.js/dist/jquery.fullpage.css"
    ],
    "main": true
    },
    [...]

then I am seeing an error upon running gulp:

    [12:05:43] Starting 'scripts'...

stream.js:74
throw er; // Unhandled stream error in pipe.
^
GulpUglifyError: unable to minify JavaScript
at createError (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/gulp-uglify/lib/create-error.js:6:14)
at wrapper (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/gulp-uglify/node_modules/lodash/_createHybrid.js:87:15)
at trycatch (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/gulp-uglify/minifier.js:26:12)
at DestroyableTransform.minify [as _transform] (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/gulp-uglify/minifier.js:76:19)
at DestroyableTransform.Transform._read (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
at DestroyableTransform.Transform._write (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
at doWrite (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
at writeOrBuffer (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
at DestroyableTransform.Writable.write (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
at write (/MY_LOCAL_DRIVE/htdocs/umbos/wp-content/themes/umbos/node_modules/gulp-concat/node_modules/readable-stream/lib/_stream_readable.js:623:24)

Pretty clueless as to what I am doing wrong…

8

You shouldn’t include css assets in your js files, keep them separated.

1 Like
9

Ah, that’s what caused the error in gulp (this reply)!

And nevermind, I was able to get things up and running after some tweaking. Sorry for the hussle…