Gulp changed ionic.app.css in ionic serve

Question

I work with ionic framework and for better performance I add angular templatecache, sass and generate using gulp. In Action this worked for me But when I serve ionic gulp generate/changed original ionic.app.css And I can't change ionic.app.css. my mean is when i edited ionic.app.css and then ionic serve my edited is remove and gulp generate/changed to original ionic.app.css file.

ionic serve
Gulp startup tasks: 0=sass, 1=templatecache, 2=watch
Running live reload server: undefined
Watching: 0=www/**/*, 1=!www/lib/**/*
Running dev server:  http://localhost:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

ionic $ [22:15:54] Using gulpfile ~\Desktop\app\gulpfile.js
[22:15:54] Starting 'sass'...
[22:15:54] Starting 'templatecache'...
[22:15:54] Starting 'watch'...
[22:15:54] Finished 'watch' after 74 ms
[22:15:54] Finished 'templatecache' after 172 ms
JS changed:   C:\Users\Mobi\Desktop\app\www\js\views.js
[22:15:55] Finished 'sass' after 1.26 s
CSS changed:  C:\Users\Mobi\Desktop\app\www\css\ionic.app.css

gulpfile:

var gulp = require('gulp');

var requireDir = require('require-dir');
requireDir('./gulp-tasks');

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

gulptask.js:

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var sass = require('gulp-sass');
var sh = require('shelljs');

var sourcemaps = require('gulp-sourcemaps');
var templateCache = require('gulp-angular-templatecache');

var paths = {
  sass: ['./scss/**/*.scss'],
  templatecache: ['./www/views/**/*.html']
};

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('templatecache', function (done) {
  gulp.src(paths.templatecache)
    .pipe(templateCache({standalone:true, filename:'views.js', module:'your_app_name.views', root:'views/'}))
    .pipe(gulp.dest('./www/js/'))
    .on('end', done);
});

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

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();
});

How do Fix this problem?!

score 0 · Answer 1 · answered Mar 24 '16 at 16:56

I am not familiar with the angular template cache, but this is normal behavior when Sass is enabled in an Ionic application.

When it is enabled, you are supposed to make your CSS changes in /scss/ionic.app.scss

During ionic serve, ionic.app.scss will be compiled into ionic.app.css, thus removing any changes you made in that file.

If you do not want to use Sass, you can make the specific Gulp tasks stop from running by removing them from the ionic.project file, as described here: https://forum.ionicframework.com/t/can-you-uninstall-or-remove-or-disable-sass/31848

Gulp changed ionic.app.css in ionic serve

1 Answers1