2016-10-10 33 views
4

我最近更新了離子及其庫文件,但這已經改變了我很多事情。當離子更新後使用服務器時,SASS不再編譯(觀看)

現在,我可以對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

回答

8

好的,我已經找到了解決方案,但實際上很遺憾的是離子1.x和離子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,你化險爲夷。 –

+0

很高興能幫到你! – Siyah

0

它與離子的錯誤,所以你需要做的僅僅是運行兩個命令提示符:

  1. ionic run serve
  2. gulp sass