0

使用具有默认 gulpfile 的离子空白模板并运行：

ionic setup sass

我可以构建应用程序的 Sass，但我想添加 Compass。因此，使用 Gulp，我根据 gulp -compass示例将以下代码添加到我的 gulpfile 中：

gulp.task( 'compass', function( done ) {
    gulp.src( './scss/ionic.app.scss' )
    .pipe( compass( {
               config_file: 'config.rb',
               css: 'www/css',
               sass: 'scss'
           } ) )
    .pipe( minifyCss( {
               keepSpecialComments: 0
           } ) )
    .pipe( rename( { extname: '.min.css' } ) )
    .pipe( gulp.dest( './www/css/' ) )
    .on( 'end', done );
} );

现在，当我使用以下方法构建时，它似乎可以工作：

ionic compass

但是，当我运行时：

ionic serve

它通过构建 Sass 中的任何更改而运行，我不断收到错误消息：

Task 'sass' is not in your gulpfile

既然我已经删除了 'sass' 任务并将其替换为我的 'compass' 任务，并用 compass 替换了所有引用，为什么它甚至不再知道 'sass' 任务了？ 默认 gulpfile 中只有三个引用，但让它工作的唯一方法是将我的 'compass' 任务重命名为 'sass'，但在其中运行 compass 管道而不是 sass 管道。

// renamed to sass from compass to remove build error
gulp.task( 'sass', function( done ) {
    gulp.src( './scss/ionic.app.scss' )
    .pipe( compass( {
               config_file: 'config.rb',
               css: 'www/css',
               sass: 'scss'
           } ) )
    .pipe( minifyCss( {
               keepSpecialComments: 0
           } ) )
    .pipe( rename( { extname: '.min.css' } ) )
    .pipe( gulp.dest( './www/css/' ) )
    .on( 'end', done );
} );
4

1 回答 1

1

将任务重命名为，sass而不是compass. Ionic 有一些内置的 sass 功能，假设 gulp 任务被命名为 sass 以支持实时重新加载。这在用于预览您的应用程序时很有帮助，ionic serve并且可以将任何样式更改推入浏览器而无需实际重新加载页面，并且 Ionic 的系统依赖于现有的特定 gulp 任务。

于 2015-05-17T23:28:10.940 回答