Ionic 2 bug: Serve --lab doesn't reload or watch (?) SCSS anymore after update

[1BJK903]

Hi guys,

Question: my ionic serve --lab function doesn't work properly anymore. If I'd remove any SCSS file, it doesn't reload my page at all... when I reload it manually, the whole page stays there, without changing the style, while it should be blank because I have no SCSS file anymore...

The thing is: it watches any HTML change I make and reloads it...

My question is: how can I fix this?

I recently updated Ionic, maybe that's the problem?

Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on. 6.3.1

Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 1.3.1-nightly-4219 Ionic CLI Version: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1 ios-deploy version: 1.9.0 ios-sim version: 5.0.8 OS: Mac OS X El Capitan Node Version: v6.6.0 Xcode version: Xcode 8.0 Build version 8A218a

It just looks like he isn't watching the SCSS anymore. Can someone help me out please?

[1BJK903]

This is my gulpfile.js by the way:

 var gulp = require('gulp');
    var gutil = require('gulp-util');
    var bower = require('bower');
    var concat = require('gulp-concat');
    var sass = require('gulp-sass');
    var minifyCss = require('gulp-minify-css');
    var rename = require('gulp-rename');
    var sh = require('shelljs');

    var paths = {
      sass: ['./scss/**/*.scss']
    };

    gulp.task('default', ['sass']);

    gulp.task('sass', function(done) {
      gulp.src('./scss/ionic.app.scss')
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(gulp.dest('./www/css/'))
        .pipe(minifyCss({
          keepSpecialComments: 0
        }))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest('./www/css/'))
        .on('end', done);
    });

    gulp.task('watch', function() {
      gulp.watch(paths.sass, ['sass']);
    });

[1BJK903]

Okay, I've found the solution, but it's actually very sad that the transition between ionic 1.x and ionic 2.x is just so badly documentated and not working flawlessly.

Anyway, what I did is:

Add this to my gulpfile.js

gulp.task('serve:before', ['default','watch']);

And also change my ionic.config.js file to:

{
  "name": "HereComesTheNameOfYourApp",
  "app_id": "YOURIDNUMBERHERE",
  "v2": false,
  "typescript": false,
  "watch": {
    "sass": [
      "scss/**/*.scss"
    ],
    "html": [
      "www/**/*.html"
    ],
    "livereload": [
      "www/**/*.html",
      "www/**/*.js",
      "www/**/*.css"
    ]
  }
}

Hope it will help someone else as well.

[dm-grinko]

Has ionic 2 gulp file? Please explain where is gulpfile.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.