Gulp 更改了 ionic serve 中的 ionic.app.css答案

【问题标题】：Gulp changed ionic.app.css in ionic serveGulp 更改了 ionic serve 中的 ionic.app.css
【发布时间】：2016-03-24 07:11:55
【问题描述】：

我使用 ionic 框架，为了获得更好的性能，我添加了 angular templatecache、sass 并使用 gulp 生成。在行动中，这对我有用但是当我提供 ionic gulp 生成/更改原始ionic.app.css 而我无法更改ionic.app.css。我的意思是当我编辑 ionic.app.css 然后 ionic serve 我的编辑被删除并 gulp 生成/更改为原始 ionic.app.css 文件。

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

如何解决这个问题？！

【问题讨论】：

标签： angularjs ionic-framework sass gulp angular-templatecache

【解决方案1】：

我不熟悉角度模板缓存，但这是在 Ionic 应用程序中启用 Sass 时的正常行为。

启用后，您应该在 /scss/ionic.app.scss 中进行 CSS 更改

在离子服务期间，ionic.app.scss 将被编译成 ionic.app.css，从而删除您在该文件中所做的任何更改。

如果您不想使用 Sass，可以通过从 ionic.project 文件中删除特定的 Gulp 任务来停止运行，如下所述：https://forum.ionicframework.com/t/can-you-uninstall-or-remove-or-disable-sass/31848

【讨论】：