CODEWITHSUNDEEP
javascriptgulpgulp-watch
Non
Non

Reputation: 8589

Live reloading not working after Ctrl + S in GULP

I do not know why those tasks for live reloading just disappear after the last Ionic Update I did. Now I am trying to fix this issue but still wondering why is not working. I am following this guide here and still can not see what is the error I have.

See some part of my gulpfile.js

var paths = {
  sass: ['/scss/**/*.scss'],
  js: ['www/js/*.js', 'www/js/**/*.js', '!www/js/lib.min.js', '!www/js/code.min.js']
};

gulp.task('compress-lib', function() {
  gulp.src([
    './www/lib/ionic/js/ionic.bundle.min.js'
  ])
    .pipe(concat('lib.min.js'))
    .pipe(gulp.dest('./www/js'))
});

gulp.task('compress-js', function() {
  gulp.src([
    './www/js/app.js',
    './www/js/lines/controller.js',
    './www/js/lines/service.js'
  ])
    .pipe(ngAnnotate())
    .pipe(concat('code.min.js'))
    .pipe(gulp.dest('./www/js'))
});

// JSHint task
gulp.task('lint', function() {
  gulp.src(paths.js)
      .pipe(jscs())
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
});

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({onError: function(e) { console.log(e); } }))
    .pipe(autoprefixer('last 2 versions', 'Chrome', 'ios_saf','Android'))
    .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']);
  gulp.watch(paths.js, ['lint', 'compress-js']);
});

every time I do ctrl + s on a file, in this case www/js/lines/controller.js, on the console you can see something like:

[14:41:11] Starting 'lint'...
[14:41:11] Finished 'lint' after 17 ms
[14:41:11] Starting 'compress-js'...
[14:41:11] Finished 'compress-js' after 5.31 ms
JS changed:   www/js/lines/controller.js
JS changed:   www/js/code.min.js

which means that there are some tasks working properly, but if I want to see those changes on the view, I have to go to the console and type gulp, do you have an idea why the app is not just reloading after ctrl + s ?

UPDATE

This is what I am trying to implement (you can see it on the link I pasted above):

"The watch task is used to run tasks as we make changes to our files. As you write code and modify your files, the gulp.watch() method will listen for changes and automatically run our tasks again so we don't have to continuously jump back to our command-line and run the gulp command each time"

Upvotes: 0

Views: 488

Answers (1)

JacobG182
JacobG182

Reputation: 329

I know this is going around the problem but use live-server instead of live reload and see if that works. Because I have had a lot of problems with live-reload in the past too.

npm install live-server

then:

live-server

NOTE: Make sure you are in the directory of your project when typing the command above.

Upvotes: 1

Related Questions