middleman-gulp-starter middleman serve only works if middleman build is never run. afterwards site.css isn't found anymore

after cloning and running bin/setup

when I run middlen serve I get the following.

When I execute middleman build and then "middleman serve" again it will show as because http://localhost:3000/stylesheets/site.css Failed to load resource: the server responded with a status of 404

when I do git checkout . and then run middleman serve again it will work properly again.

If I change site.scss to site.css.scss then middleman serve will always work. but then production doesn't work.

# Ignore the CSS file Middleman normally generates
# Middleman expects `site.css.scss` → `site.css`
# We strip the `.css` to prevent Gulp generating `site.css.css`
ignore 'stylesheets/site'

that part in production.rb doesn't seem to be doing what it's supposed to do or it messes up the middleman serve configuration somehow.

Nov 14 '16 11:11 rtack

I have followed the steps you provided:

Checkout
middleman serve
middleman build
middleman serve

And I can't replicate

Nov 14 '16 13:11 craigmdennis

I've cloned this project at least half a dozen times and I am always running into the same issue. anything I can do to debug this?

Just tried again. and exactly the same.

I am on linux npm --version 2.15.11 gulp --version 3.9.1 ruby --version ruby 2.2.4p230 (2015-12-16 revision 53155) [x86_64-linux]

could it be different ruby gems version or... ?

Below the output from running setup.

➜  middleman-gulp-starter git:(master) ✗ bin/setup 
Installing Ruby gem dependencies...
Using concurrent-ruby 1.0.2
Using i18n 0.7.0
Using minitest 5.9.1
Using thread_safe 0.3.5
Using public_suffix 2.0.4
Using backports 3.6.8
Using coffee-script-source 1.10.0
Using execjs 2.7.0
Using sass 3.4.22
Using contracts 0.13.0
Using dotenv 2.1.1
Using erubis 2.7.0
Using fast_blank 1.0.0
Using ffi 1.9.14
Using tilt 2.0.5
Using hashie 3.4.6
Using htmlcompressor 0.2.0
Using kramdown 1.12.0
Using rb-fsevent 0.9.8
Using memoist 0.15.0
Using thor 0.19.1
Using bundler 1.13.1
Using parallel 1.9.0
Using rack 2.0.1
Using servolux 0.12.0
Using hamster 3.0.0
Using tzinfo 1.2.2
Using addressable 2.5.0
Using coffee-script 2.4.1
Using uglifier 3.0.3
Using compass-import-once 1.0.5
Using rb-inotify 0.9.7
Using haml 4.0.7
Using middleman-cli 4.1.11
Using activesupport 5.0.0.1
Using fastimage 2.0.1
Using listen 3.0.8
Using padrino-support 0.13.3.3
Using padrino-helpers 0.13.3.3
Using middleman-core 4.1.11
Using middleman 4.1.11
Using middleman-minify-html 3.4.1
Bundle complete! 4 Gemfile dependencies, 42 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
Installing Node package dependencies...
npm WARN optional dep failed, continuing [email protected]
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN optional dep failed, continuing [email protected]
npm WARN optional dep failed, continuing [email protected]
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN optional dep failed, continuing [email protected]
npm WARN deprecated [email protected]: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN optional dep failed, continuing [email protected]

> [email protected] postinstall /home/rtack/dev/projects/os/middleman-gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> [email protected] postinstall /home/rtack/dev/projects/os/middleman-gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully

> [email protected] postinstall /home/rtack/dev/projects/os/middleman-gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin
> node lib/install.js

  ✔ jpegtran pre-build test passed successfully
\
> [email protected] install /home/rtack/dev/projects/os/middleman-gulp-starter/node_modules/gulp-iconfont/node_modules/gulp-ttf2woff2/node_modules/ttf2woff2
> (node-gyp rebuild > builderror.log) || (exit 0)


> [email protected] install /home/rtack/dev/projects/os/middleman-gulp-starter/node_modules/gulp-sass/node_modules/node-sass
> node scripts/install.js

info node-sass install Cached binary found at /home/rtack/.npm/node-sass/3.12.2/linux-x64-46_binding.node

> [email protected] postinstall /home/rtack/dev/projects/os/middleman-gulp-starter/node_modules/gulp-sass/node_modules/node-sass
> node scripts/build.js

info node-sass build Binary found at /home/rtack/dev/projects/os/middleman-gulp-starter/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-46/binding.node
info node-sass build Testing binary
info node-sass build Binary is fine
[email protected] node_modules/gulp-rename

[email protected] node_modules/karma-firefox-launcher

[email protected] node_modules/object-assign

[email protected] node_modules/sinon-chai

[email protected] node_modules/pretty-hrtime

[email protected] node_modules/open

[email protected] node_modules/karma-mocha

[email protected] node_modules/karma-sinon-chai

[email protected] node_modules/lolex

[email protected] node_modules/gulp-sequence
└── [email protected]

[email protected] node_modules/coffee-script

[email protected] node_modules/require-dir

[email protected] node_modules/coffee-loader
└── [email protected] ([email protected], [email protected], [email protected])

[email protected] node_modules/morgan
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected])

[email protected] node_modules/karma-chrome-launcher
├── [email protected] ([email protected])
└── [email protected] ([email protected])

[email protected] node_modules/webpack-hot-middleware
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
└── [email protected]

[email protected] node_modules/compression
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/gulp-data
├── [email protected]
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/gulp-rev
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/gulp-changed
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/gulp-sourcemaps
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/express
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/babel-loader
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/gulp-rev-replace
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/webpack-dev-middleware
├── [email protected]
├── [email protected]
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/chai
├── [email protected]
├── [email protected]
└── [email protected] ([email protected])

[email protected] node_modules/del
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/gulp-rev-napkin
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/sinon
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected] ([email protected])

[email protected] node_modules/karma-cli
└── [email protected]

[email protected] node_modules/gulp-svgstore
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/gulp-if
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected])

[email protected] node_modules/gulp-watch
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/gulp-sizereport
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/mocha
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/gulp-util
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/gulp-uglify
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/gulp-gh-pages
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/gulp
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/karma-webpack
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
└── [email protected]

[email protected] node_modules/gulp-autoprefixer
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/lodash

[email protected] node_modules/karma-nyan-reporter
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/gulp-nunjucks-render
├── [email protected] ([email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected])

[email protected] node_modules/gulp-cssnano
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/gulp-notify
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/karma
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected]

[email protected] node_modules/gulp-imagemin
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected])

[email protected] node_modules/webpack
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/browser-sync
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/babel-core
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/babel-preset-es2015
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/babel-preset-stage-1
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/gulp-iconfont
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected])

[email protected] node_modules/gulp-sass
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

Nov 14 '16 14:11 rtack

I've now removed info node-sass install Cached binary found at /home/rtack/.npm/node-sass/3.12.2/linux-x64-46_binding.node

doesn't change anything though.

however I can confirm that

Checkout
middleman serve

ok

middleman build
middleman serve

not ok

running

middleman serve

one more time --> OK again.

so first time running middleman serve always fails. and then on further executions it works again fine.

Nov 14 '16 14:11 rtack

I'm running into this issue as well. I can't reproduce it quite exactly each and everytime, but lets say the following scenario is true:

Middleman is running (serve) for your project
In terminal you open a new tab
Change directory into your project
Run middleman build (in my case I'm using bundle exec middleman build)

Then the following happens:

➜  cat build/index.html
<!doctype html>
<html>
  <head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">

    <title>Some Website.</title>

    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta name="og:site_name" content="Some Site Name">
    <meta name="description" content=Beautiful apps. Bulletproof code.>

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">

    <link href="/stylesheets/site.css" rel="stylesheet" />
    <script src="/javascripts/all.js"></script>
  </head>

Notice that the stylesheet and javascript compiles to:

    <link href="/stylesheets/site.css" rel="stylesheet" />
    <script src="/javascripts/all.js"></script>

And when I list out the javascript and stylesheet directories:

➜  website git:(17-team-page) ✗ ls build/stylesheets
site                site-201dc9d28a.css
➜  website git:(17-team-page) ✗ ls build/javascripts
all-365177fe55f13f07f7f8.js all.js                      test.js

From what I can tell. If you're running the server, the files get processed and then when you run middleman's build process the files look "identical" and thus the compilation fails. I'm guessing its because the build folder is being listened to by the livereload?

Feb 21 '17 14:02 alvincrespo

Forgot to add my environment info:

➜  bundle exec middleman version
Middleman 4.2.0
➜  node -v
v7.2.0
➜  npm -v
3.10.9
➜  bundle exec middleman version
Middleman 4.2.0
➜  gulp -v
[09:55:42] CLI version 3.9.1
[09:55:42] Local version 3.9.1
➜  ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x86_64-darwin16]

Let me know if you have any questions, I'd like to try and figure this one out.

Feb 21 '17 14:02 alvincrespo