Gulp deleting entire SCSS files frequently

[pxwee5]

I have been developing on this generator for three weeks now and this has occur quite a number of times. It may happen when the file is opened or when it is closed.
Git saved my ass multiple times.

Has anyone else encountered this ?

[silvenon]

Can you share your gulpfile.js?

[pxwee5]

Here you go. I think the only thing I have added is the task called "nunjucks" on the last line.

// generated on 2017-02-13 using generator-webapp 2.4.1
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const browserSync = require('browser-sync').create();
const del = require('del');
const wiredep = require('wiredep').stream;
const runSequence = require('run-sequence');

const $ = gulpLoadPlugins();
const reload = browserSync.reload;

var dev = true;

gulp.task('styles', () => {
  return gulp.src('app/styles/*.scss')
    .pipe($.plumber())
    .pipe($.if(dev, $.sourcemaps.init()))
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    .pipe($.if(dev, $.sourcemaps.write()))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

gulp.task('scripts', () => {
  return gulp.src('app/scripts/**/*.js')
    .pipe($.plumber())
    .pipe($.if(dev, $.sourcemaps.init()))
    .pipe($.babel())
    .pipe($.if(dev, $.sourcemaps.write('.')))
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe(reload({stream: true}));
});

function lint(files) {
  return gulp.src(files)
    .pipe($.eslint({ fix: true }))
    .pipe(reload({stream: true, once: true}))
    .pipe($.eslint.format())
    .pipe($.if(!browserSync.active, $.eslint.failAfterError()));
}

gulp.task('lint', () => {
  return lint('app/scripts/**/*.js')
    .pipe(gulp.dest('app/scripts'));
});
gulp.task('lint:test', () => {
  return lint('test/spec/**/*.js')
    .pipe(gulp.dest('test/spec'));
});

gulp.task('html', ['views', 'styles', 'scripts'], () => {
  return gulp.src(['app/*.html', '.tmp/*.html'])
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
    .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}})))
    .pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false})))
    .pipe($.if(/\.html$/, $.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: {compress: {drop_console: true}},
      processConditionalComments: true,
      removeComments: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true
    })))
    .pipe(gulp.dest('dist'));
});

gulp.task('images', () => {
  return gulp.src('app/images/**/*')
    .pipe($.cache($.imagemin()))
    .pipe(gulp.dest('dist/images'));
});

gulp.task('data', () => {
  return gulp.src('app/data/**/*.json')
    .pipe(gulp.dest('dist/data'));
});

gulp.task('template', () => {
  return gulp.src('app/scripts/templates/*')
    .pipe(gulp.dest('dist/scripts/templates'));
});

gulp.task('fonts', () => {
  return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
    .concat('app/fonts/**/*'))
    .pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts')));
});

gulp.task('extras', () => {
  return gulp.src([
    'app/*',
    '!app/*.html',
    '!app/*.njk'
  ], {
    dot: true
  }).pipe(gulp.dest('dist'));
});

gulp.task('clean', del.bind(null, ['.tmp', 'dist']));

gulp.task('serve', () => {
  runSequence(['clean', 'wiredep'], ['views', 'styles', 'scripts', 'fonts'], () => {
    browserSync.init({
      notify: false,
      port: 9000,
      server: {
        baseDir: ['.tmp', 'app'],
        routes: {
          '/bower_components': 'bower_components'
        }
      }
    });

    gulp.watch([
      'app/images/**/*',
      '.tmp/fonts/**/*'
    ]).on('change', reload);

    gulp.watch('app/**/*.{html,njk}', ['views']);
    gulp.watch('app/styles/**/*.scss', ['styles']);
    gulp.watch('app/scripts/**/*.js', ['scripts']);
    gulp.watch('app/fonts/**/*', ['fonts']);
    gulp.watch('bower.json', ['wiredep', 'fonts']);
  });
});

gulp.task('serve:dist', ['default'], () => {
  browserSync.init({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['dist']
    }
  });
});

gulp.task('serve:test', ['scripts'], () => {
  browserSync.init({
    notify: false,
    port: 9000,
    ui: false,
    server: {
      baseDir: 'test',
      routes: {
        '/scripts': '.tmp/scripts',
        '/bower_components': 'bower_components'
      }
    }
  });

  gulp.watch('app/scripts/**/*.js', ['scripts']);
  gulp.watch(['test/spec/**/*.js', 'test/index.html']).on('change', reload);
  gulp.watch('test/spec/**/*.js', ['lint:test']);
});

// inject bower components
gulp.task('wiredep', () => {
  gulp.src('app/styles/*.scss')
    .pipe($.filter(file => file.stat && file.stat.size))
    .pipe(wiredep({
      ignorePath: /^(\.\.\/)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/layouts/*.njk')
    .pipe(wiredep({
      exclude: ['bootstrap-sass'],
      ignorePath: /^(\.\.\/)*\.\./,
        fileTypes: {
          njk: {
            block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
            detect: {
              js: /<script.*src=['"]([^'"]+)/gi,
              css: /<link.*href=['"]([^'"]+)/gi
            },
            replace: {
              js: '<script src="{{filePath}}"></script>',
              css: '<link rel="stylesheet" href="{{filePath}}" />'
            }
          }
        }
      }))
    .pipe(gulp.dest('app/layouts'));
});

gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras', 'data', 'template'], () => {
  return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});

gulp.task('default', () => {
  return new Promise(resolve => {
    dev = false;
    runSequence(['clean', 'wiredep'], 'build', resolve);
  });
});

gulp.task('views', () => {
  return gulp.src('app/*.njk')
    .pipe($.nunjucksRender({
      path: 'app'
    }))
    .pipe(gulp.dest('.tmp'))
    .pipe(reload({stream: true}));
});

gulp.task('nunjucks', () => {
  return gulp.src('app/includes/**/*.njk')
    .pipe($.nunjucksRender({
      path: 'app'
    }))
    .pipe(gulp.dest('dist/includes'));
});

[silvenon]

I thought that maybe you modified gulpfile.js, but this should work fine. It's really hard to tell what could be wrong at this point, either something else is going on here or there's something seriously wrong with Gulp. 😕

[dertuerke]

• Do u use a IDE?
• Have u a auto-formatter active?

[pxwee5]

@dertuerke,
Yes I use Atom.
No I am not aware of any autoformatter plugins used by Atom.

[dertuerke]

@pxwee5 At which command, does it delete the file?

[pxwee5]

I do not know when exactly it happened to be honest. It happens very randomly.
Am I the only person experiencing this o.O

[dertuerke]

hmm.... can u share ur code?

[pxwee5]

Uhh, it's actually just SCSS files that are "deleted"
Do you want to see anything more specific ?

[dertuerke]

nope. i compare ur gulp file with my and its look same. can u post ur default.njk? Where u include the JS and Styles

[pxwee5]

Here you go.

<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ballance</title>

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

    <!-- build:js scripts/vendor/modernizr.js -->
    <script src="/bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->
  </head>
  <body>
    <!--[if IE]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    {% include "includes/components/menu.njk" %}
    <div class="o-body-content">
      <div class="o-body-content__overlay hidden-xs"></div>
      {% block content %}{% endblock %}
      {% include "includes/components/footer.njk" %}
    </div>
    {% include "includes/components/slide-in.njk" %}

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
      e.src='https://www.google-analytics.com/analytics.js';
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
      ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>

    <!-- build:js scripts/vendor.js -->

    <!-- <script src="/scripts/vendor/materialize/dropdown.js"></script> -->
    <!-- bower:js -->
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/modernizr/modernizr.js"></script>
    <script src="/bower_components/owl.carousel/dist/owl.carousel.js"></script>
    <script src="/bower_components/jquery.pointer-events-polyfill/src/jquery.pointer-events-polyfill.js"></script>
    <script src="/bower_components/matchHeight/dist/jquery.matchHeight.js"></script>
    <script src="/bower_components/jscroll/jquery.jscroll.js"></script>
    <script src="/bower_components/es6-promise/es6-promise.js"></script>
    <script src="/bower_components/mustache.js/mustache.js"></script>
    <!-- endbower -->
    <script src="scripts/vendor/headroom.js"></script>
    <script src="scripts/vendor/polyfill-foreach.js"></script>
    <script src="/bower_components/in-view/dist/in-view.min.js"></script>
    <!-- endbuild -->

    <!-- build:js scripts/plugins.js -->
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js"></script>
    <!-- endbuild -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
    {# <script src="https://use.fontawesome.com/d7cd4aed19.js"></script> #}
    <!-- build:js scripts/main.js -->
    <script src="scripts/guid.js"></script>
    <script src="scripts/dropdown.js"></script>
    <script src="scripts/slide-in.js"></script>
    <script src="scripts/graph.js"></script>
    <script src="scripts/progressbar.js"></script>
    <script src="scripts/product.js"></script>
    <script src="scripts/selectize.js"></script>
    <script src="scripts/main.js"></script>
    <!-- endbuild -->
  </body>
</html>

[dertuerke]

ok. Where u import the scss-file?

and can u try this task: gulp styles

[pxwee5]

Yes I can. Everything works like normal actually. Just that occasionally my scss file gets emptied.

scss files are imported in /app/styles/main.scss

[dertuerke]

hmmmmmmmmmmmmmmmmm....... i have no idee more without the code.
i have the same code only that i dont import bootstrap in the main.scss.

njk-File

<!-- build:css styles/main.css -->
   <link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

<!-- build:css styles/bootstrap.css -->
   <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<!-- endbuild -->

main.scss i remove the bootstrap import

[jdahdah]

I'm having this issue as well and I can't figure out what it causing it. It's not just .scss, but also .pug files that are randomly deleted. I modified the gulpfile to include pug according to your recipe.

I'm also having an issue that I believe might be related. During build (default task), it'll sometimes render everything, but parts of a page will be missing in the final output (without any error messages). Which parts are missing seems to be more or less random every time I run it, but it's usually one of the includes in default.pug, which looks like this:

block config
  include /_includes/config
include /_includes/mixins

doctype html
html(lang='de').no-js
  head
    include /_includes/head

  body(class=bodyClass)

    a#top.hidden

    block content

    include /_includes/header

    include /_includes/footer

    #overlay

    include /_includes/foot-scripts

The only bit that always renders correctly is whatever is overridden in index.pug via block content, which looks like this:

extends /_layouts/default

append config
  - var pageTitle       = 'Page title'
  - var currentPage     = 'Current page name';

block content
  p ...

My views task looks like this:

gulp.task('views', () => {
  return gulp.src(['app/**/*.pug', '!app/_*/*'])
    .pipe($.pug({pretty: true, basedir: 'app/'}))
    .pipe(gulp.dest('.tmp'))
});

I've tried updating gulp, gulp-pug, node and a bunch of other things but the error persists. It's becoming a problem because I've used the generator in a production project and I sometimes have to re-build the final project 5-6 times until everything is rendered out correctly. Please let me know what other information I can provide. I'd be happy to share the entire project if someone wants to have a look. It seems like there is a serious issue with gulp somewhere.

[silvenon]

@jdahdah I'm sorry to hear that 😢 you seem to have modified gulpfile.js far beyond the recipe. Could you work on isolating the problem and providing a more minimal demo?

[silvenon]

Also, generator-gulp-dahdah wouldn't register for me, I tried both installing it globally and npm linking the cloned repository.

[jdahdah]

@silvenon Thanks for your response, I'm trying to distill it into something more minimal. Regarding running my generator, that's strange. I did a fresh install on a different computer according to the readme and it seems to be working fine. Did you get any specific error message? If the issue persists (and you have a few minutes), would you mind opening an issue on my repo so I can look into it? I don't want to flood the other folks here with that since it's out of this bug's scope.

[jdahdah]

Just an example of these random errors: first time running gulp serve:dist causes an error during the views task, second time doesn't:

Ran it again a few times, the next error happens after a few runs in a completely different place:

Still trying to figure out if there is a way to simplify this any more. I can open a new issue if you feel this is not related to the deletion issue.

[silvenon]

@jdahdah yeah, please, this seems to be related to the Pug recipe.

[Trost123]

I use Nunjucks and had this bug. Spent more than a hour poking it.
To clarify: the scss files don't get deleted, but their contents do.
I think the problem is running wiredep and clear in parallel.
Try this:
(in default task)

-    runSequence(['clean', 'wiredep'], 'build', resolve);
+    runSequence('clean', 'wiredep', 'build', resolve);

Also to reproduce this bug you delete the tmp and dist directories manually, before running "default".
I think it happens when "clean" has nothing to clean and fires a complete event too early.
My guess is when this happens, build task starts before wiredep is complete.

[djmtype]

I've also had this happen to me using gulp clean. It randomly wipes all contents in my default.njk file. Then, obviously causes an rrror when running gulp serve or build.

[jamilalisgandarov]

It has happened to me once, while server was running, I run gulp build and after that scss file was deleted.

[jaysunwalter123]

Ditto, same thing happens to me from time to time. Has been an issue for a long time, thank goodness for version control.

[Trost123]

Ok, I think finally\accidentally figured this one out. When you add Pug or Nunjucks recipe, you need to also iclude
.pipe($.filter(file => file.stat && file.stat.size))
before
.pipe(wiredep({
before sending those files to wiredep. Wiredep seems to bug out on empty files and deleting contents of some file in pipe before crash.

[ppozniak]

Pretty old issue, but I have the same issue here.
Today one of my files was emptied. But the problem is: randomly some .scss files are ignored during gulp build task.

No errors, nothing.

The only thing I've changed in gulpfile is

gulp.task('styles', () => {
  return gulp.src('app/styles/*.scss')
    .pipe($.plumber())
    .pipe($.if(dev, $.sourcemaps.init()))
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.', 'node_modules/hamburgers/_sass/'] // Had to include that path here 
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    .pipe($.if(dev, $.sourcemaps.write()))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

I use main.scss as my entry point

@import 'globals/_variables';
@import 'globals/_mixins';
@import 'globals/_helpers';
@import 'globals/_atoms';
@import '_layout';
@import '_hero';
@import '_about';
@import '_houses';
@import '_pricing';
@import '_contact';
@import 'node_modules/hamburgers/_sass/hamburgers/hamburgers';

and it has those imports.

// generated on 2018-04-08 using generator-webapp 3.0.1

[silvenon]

I think wiredep is the only one that actually modifies file. I plan to remove Bower and wiredep, hopefully this problem will go away. I hope you were able to recover the contents of your file. 😕

I suggest removing that part of the wiredep task as a workaround, maybe this will stop happening.

[UlisesGascon]

I believe that this bug was resolved at #737. If this problem persist I will re-open this issue again. 😉