CODEWITHSUNDEEP
javascriptgulp
Non
Non

Reputation: 8589

Creating a Gulp task but not working, why?

according to the Gulp Docs, and according to what I see, I have everything fine.

Before, lets say a week ago, I was doing ctrl + s on Sublime Text and my view(browser) reload automatically. Now, after some merges with master branch, those tasks are not working anymore, nothing is reloading and I have to go to my console and do Gulp every time I want to see changes and I hate that. I am going to paste my gulpfile.js here so maybe you have an answer for me

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    gutil = require('gulp-util'),
    bower = require('bower'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifyCss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    sh = require('shelljs'),
    jshint = require('gulp-jshint'),
    jscs = require('gulp-jscs'),
    shell = require('gulp-shell'),
    uglify = require('gulp-uglify'),
    ngAnnotate = require('gulp-ng-annotate');

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

// Dev task
gulp.task('dev', ['sass', 'lint', 'compress-lib', 'compress-js', 'run-ionic'], function() { });

// Build task


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

//Ionic Serve Task
gulp.task('run-ionic',shell.task([
  'ionic serve'
]));

gulp.task('compress-lib', function() {
  gulp.src([
    './www/lib/ionic/js/ionic.bundle.min.js',
    './www/lib/localforage/dist/localforage.min.js',
    './www/lib/lodash/lodash.min.js',
    './www/lib/moment/moment.js',
    './www/lib/validator-js/validator.min.js',
    './www/lib/localforage-wrapper/localforage-wrapper.js',
    './www/lib/ua-parser-js/dist/ua-parser.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/controllers.js',
    './www/js/common/footerController.js',
    './www/js/common/sportsFilter.js',
    './www/js/common/searchBarDirective.js',
    './www/js/auth/controller.js',
    './www/js/auth/service.js',
    './www/js/auth/interceptor.js',
    './www/js/auth/logoutController.js',
    './www/js/sports/controller.js',
    './www/js/sports/service.js',
    './www/js/leagues/service.js',
    './www/js/lines/controller.js',
    './www/js/lines/service.js',
    './www/js/betSlip/controller.js',
    './www/js/betSlip/service.js',
    './www/js/deviceDetector/service.js'
  ])
    .pipe(ngAnnotate())
    .pipe(concat('code.min.js'))
    .pipe(gulp.dest('./www/js'))
});

// JSHint task
gulp.task('lint', function() {
  gulp.src(['www/js/*.js', 'www/js/**/*.js', '!www/js/lib.min.js', '!www/js/code.min.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.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

all I need is the reloading part back, every time I save -- ctrl + s something in my IDE, I want to see the changes in the browser automatically, I am wasting a lot of my time by going to the console and typing gulp everty time I want to see changes.

Upvotes: 0

Views: 1457

Answers (2)

Patrick Gunderson
Patrick Gunderson

Reputation: 3281

you should check when the gulpfile changed in git, then diff the two versions to see what changed.

$ git log gulpfile.js
$ git diff <commit id> gulpfile.js

Upvotes: 2

posit labs
posit labs

Reputation: 9431

In regards to the browser not refreshing, it's likely an issue with LiveReload. Check your watchPatterns config in the ionic.project file.

https://github.com/driftyco/ionic-cli#testing-in-a-browser

As for gulp not running after you change a file:

It sounds like someone may have moved some files around. Confirm that this path still points to the files you want to watch: sass: ['./scss/**/*.scss']. If it's not, update it and run gulp watch.

Keep in mind that gulp.watch() can't detect new files, so it will need to be restarted every time a new watchable file is created.

Upvotes: 1

Related Questions