0

私は ionic フレームワークを使用しており、パフォーマンスを向上させるために、angular templatecache、sass を追加し、gulp を使用して生成します。実際にはこれでうまくいきましたが、 ionic gulp generate/changed original を提供するionic.app.cssと、変更できませんionic.app.css。私の平均は、私が編集ionic.app.cssしたときであり、その後ionic serve、私の編集は削除され、元のファイルに生成/変更され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

gulp ファイル:

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

どうすればこの問題を解決できますか?!

4

1 に答える 1

0

angular テンプレート キャッシュについて詳しくはありませんが、Ionic アプリケーションで Sass が有効になっている場合、これは正常な動作です。

有効にすると、/scss/ionic.app.scss で CSS を変更する必要があります。

ionic serve 中に、ionic.app.scss は ionic.app.css にコンパイルされるため、そのファイルで行った変更はすべて削除されます。

Sass を使用したくない場合は、https ://forum.ionicframework.com/t/can-you-uninstall で説明されているように、特定の Gulp タスクを ionic.project ファイルから削除することで実行を停止できます。 -or-remove-or-disable-sass/31848

于 2016-03-24T16:56:58.033 に答える