Блог

Я недавно обновил ionic и его библиотеки, но это многое изменило для меня.

Прямо сейчас я могу внести некоторые изменения в HTML, и моя загрузка просто показывает их. Когда я делаю это в определенном файле SCSS, вообще ничего не происходит. Так ionic serve --lab что команда для меня просто бесполезна.

Это мой gulpfile.js

 var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

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

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

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .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']);
});
  

И это моя локальная среда:

 Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.3.1

Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.3.1-nightly-4219
Ionic CLI Version: 2.1.0-beta.3
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.6.0
Xcode version: Xcode 8.0 Build version 8A218a 
  

Есть идеи, что пойдет не так или что я должен делать? Я уже пробовал ionic setup sass , но это работает только один раз. Я не хочу этого каждый раз, когда меняю код. Похоже, что он больше не просматривает мой файл SCSS, но я не знаю почему, потому что я вообще не менял свой gulpfile.js .

Хорошо, я нашел решение, но на самом деле очень грустно, что переход между ionic 1.x и ionic 2.x так плохо документирован и не работает безупречно.

В любом случае, то, что я сделал, это:

Добавьте это в мой gulpfile.js

 gulp.task('serve:before', ['default','watch']);
  

А также измените мой ionic.config.js файл на:

 {
  "name": "HereComesTheNameOfYourApp",
  "app_id": "YOURIDNUMBERHERE",
  "v2": false,
  "typescript": false,
  "watch": {
    "sass": [
      "scss/**/*.scss"
    ],
    "html": [
      "www/**/*.html"
    ],
    "livereload": [
      "www/**/*.html",
      "www/**/*.js",
      "www/**/*.css"
    ]
  }
}
  

Надеюсь, это поможет и кому-то еще.

Это ошибка с Ionic, поэтому вам просто нужно запустить две командные строки:

1. ionic run serve
2. gulp sass