Foundation-sites: Gulp does not update 'date modified' of dist-directory after changes in partials - (zurb-advanced-template)

[FynnZW]

I've got a rather specific bug and it might actually be a bug from gulp, not foundation. But in any case, it would be great to have a workaround.
My Setup:

• Foundation 6.2.0 (advanced template)
• [email protected]
• OSX

I ran npm install and npm update , too.

How can we reproduce this bug?

1. Start foundation watch in a zurb template, edit any _partial.scss from the src/scss/components-directory
2. Alternatively, edit anything in the default.html in src/layouts

What did you expect to happen?

1. The "date modified" of the app.css updates in dist
2. All html-files update their "date modified" in dist, since their header and footer were updated by altering the default.html in src

What happened instead?

1. The app.css keeps the date of the original app.scss in src, regardless in changes in any imported scss-partials. To force an update , it is necessary to make any change in app.scss (like opening it, add a space anywhere, and save).
2. The "date modified" of individual html-files in dist do not get updated when you make any changes in the default.html in src.

I remember that before updating to 6.2 and gulp#4.0, all files in dist got a new "date modified". I think it's great that this does not happen anymore, only changed files get updated.
The problem is just that imports like scss-partials or the panini-layout are not registered as changes.

I no expert in gulp, but it seems to be connected to gulp-vinyl. I found these related discussions on gulp:
https://github.com/gulpjs/gulp/issues/1414
https://github.com/gulpjs/gulp/issues/1461
It seems it was resolved, though?:
https://github.com/gulpjs/vinyl/pull/75
So I guess these bug reports were about the an older bug not updating the date at all, and not about not noticing imported changes.

Edit , here's the package.json:

{
  "name": "foundation-zurb-template",
  "version": "1.0.0",
  "description": "Official ZURB Template for Foundation for Sites.",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp",
    "build": "gulp build --production"
  },
  "author": "ZURB <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.3.17",
    "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.5.0",
    "babel-plugin-transform-es2015-block-scoping": "^6.5.0",
    "babel-plugin-transform-es2015-classes": "^6.5.2",
    "babel-plugin-transform-es2015-destructuring": "^6.5.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
    "babel-plugin-transform-es2015-parameters": "^6.5.0",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
    "babel-plugin-transform-es2015-spread": "^6.5.2",
    "babel-plugin-transform-es2015-template-literals": "^6.5.2",
    "babel-preset-es2015": "^6.3.13",
    "browser-sync": "^2.10.0",
    "gulp": "gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-babel": "^6.1.2",
    "gulp-cli": "gulpjs/gulp-cli#4.0",
    "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"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/zurb/foundation-zurb-template.git"
  },
  "bugs": {
    "url": "https://github.com/zurb/foundation-sites/issues",
    "email": "[email protected]"
  },
  "private": true
}

[FynnZW]

My workaround at the moment is using this additional gulp-plugin:
https://www.npmjs.com/package/gulp-touch
npm install --save-dev gulp-touch
and then calling it before the browser-reload:

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

[billyromano]

The gulp-touch plugin works like a charm. I'm surprised gulp has this type of issue still to this day. It's been frustrating with a recent project between .NET and Front End devs.

[DanielRuf]

gulp-touch is also what we use in production. This is a known (config) issue in Gulp.

[DanielRuf]

Should we implement gulp-touch for now? When we switch to a full webpack build we will not have this issue anymore.

[DanielRuf]

How should we decide on this @ncoden? In our projects we use sometimes gulp-touch but our CMS has cache busting integrated in the deployment process so we do not need this in most cases.

I think this should be part of (one of) the templates, not the framework itself.

[DanielRuf]

@ncoden what should we do here?

[JessDelAngel]

I can't install the gulp-touch plugin. I get this error:

npm ERR! code ETARGET npm ERR! notarget No matching version found for [email protected] npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist. npm ERR! notarget npm ERR! notarget It was specified as a dependency of 'foundation-zurb-template' npm ERR! notarget

I don't know how to solve this. Can someone help me please?

[DanielRuf]

Hi @JessDelAngel,

this is a different issue. Did you already try to delete the lockfile and install it again?

[JessDelAngel]

Hi @DanielRuf, thank you so much for the quick response. Where can I find the lockfile? (I'm sorry, but I don't know much about this kind of things)

[DanielRuf]

Try rm package-lock.json or manually delete the package-lock.json file.

[JessDelAngel]

Thank you so much @DanielRuf!

[DanielRuf]

Did this solve your issue @JessDelAngel?

[JessDelAngel]

Yes, it did! Thanks @DanielRuf :)

[DanielRuf]

Also see https://github.com/ahmadnassri/node-har-validator/issues/112#issuecomment-437378269 and https://github.com/ahmadnassri/node-har-validator/issues/113 why the version was not found anymore.

The author unpublished two versions without a good reason.

[DanielRuf]

So far we did not receive fue'rther reports.

I close this issue for now. It is probably fixed in gulp.

Please let us know if this is not the case for you.