Ionic更新后使用serve时,SASS不再编译(监听)了。

4

我最近更新了ionic及其库,但这对我造成了许多变化。

目前,我可以在HTML中进行一些更改,我的livereload就会显示它们。当我在某个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
2个回答

7

好的,我已经找到了解决方案,但实际上很遗憾的是,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"
    ]
  }
}

希望这也能帮助其他人。


2
谢谢 @siyah,你救了我们的一天。 - Sharan Ainapurapu
很高兴能够帮助! - Siyah

0

这是Ionic的一个bug,所以你需要做的就是运行两个命令提示符:

  1. ionic run serve
  2. gulp sass

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接