Gulp changed ionic.app.css in ionic serve


#1

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?!


#2

Since you have Sass setup for your app you should not be updating ionic.app.css but instead update ionic.app.scss which is found in the scss folder. Gulp is compiling your you Sass into CSS.