2016-11-05 11 views
0

@importsの変更をメインのSCSSファイルの変更とともにコンパイルしようとしていて、基本的にこれを動作させています。Gulp Sassは2つのセーブでのみコンパイルする

私の設定に関する問題:変更を確認するには、ファイルをメインファイルかインポートファイルかにかかわらず2回保存する必要があります。これに関するアイデアは非常に高く評価されています。

ディレクトリ構造が単純である:

var gulp = require('gulp'); 
 
var $ = require('gulp-load-plugins')(); 
 
var autoprefixer = require('gulp-autoprefixer'); 
 
var rename = require('gulp-rename'); 
 
var sync = require('browser-sync').create(); // create a browser sync instance. 
 

 
var sassPaths = [ 
 
    'bower_components/foundation-sites/scss', 
 
    'bower_components/motion-ui/src' 
 
]; 
 

 
var paths = { 
 
    'assets': 'assets', 
 
    'dev': 'assets/styles/dev' 
 
}; 
 

 
// DEV CSS 
 

 
    gulp.task('dev-styles', function() { 
 
    return gulp.src(['scss/**/*.scss', 'scss/*.scss']) 
 
    .pipe($.sass({ 
 
     includePaths: sassPaths, 
 
     outputStyles: 'expanded' 
 
    }) 
 
     .on('error', $.sass.logError)) 
 
    .pipe(autoprefixer({ 
 
     browsers: ['last 2 versions', 'ie >=9'] 
 
    })) 
 
    .pipe(rename({ 
 
     suffix: '.dev' 
 
    })) 
 
    .pipe(gulp.dest('paths.dev')); 
 
    }); 
 

 

 
// DEFAULT WATCH 
 

 
    gulp.task('default', function() { 
 

 
    sync.init({ 
 
     injectChanges: true, 
 
     proxy: 'localhost/basic-modx' 
 
    }); 
 
\t 
 
\t gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ], ['dev-styles']); 
 
    gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ]).on('change', sync.reload); 
 
});

- - > SCSS
> SCSS /パーシャルはここ

は私gulpfileの関連する部分です

答えて

1

あなたの時計は奇妙に設定されています。私は、ブラウザをリロードする第2のものが実際にscssを翻訳する最初のものの前に終わると思うので、リロードが起こったときに何も変わっていない。したがって、セーブを2回実行する必要があります。

gulp.task('dev-styles', function() { 
    return gulp.src(['scss/**/*.scss', 'scss/*.scss']) 
    .pipe($.sass({ 
     includePaths: sassPaths, 
     outputStyles: 'expanded' 
    }) 
    .on('error', $.sass.logError)) 
    .pipe(autoprefixer({ 
     browsers: ['last 2 versions', 'ie >=9'] 
    })) 
    .pipe(rename({ 
     suffix: '.dev' 
    })) 
    .pipe(gulp.dest('paths.dev')); 
    .pipe(sync.stream()); 
}); 

と第二gulp.watch声明を取り除く:browserSync documentationから

良い方法は、このようなあなたの「DEV-スタイル」タスクの終了時にリロードを持つことです。

+0

ありがとうございました - この問題が発生し、この設定の不一致が見えたが、いくつかのプロジェクトで問題なく使用されたときにbrowserSyncのドキュメントをチェックしました。とにかく、gulpfileがドキュメントに従うようになりました(!)、すべてうまくいきます。再度、感謝します。 – jivers

関連する問題