###前提・実現したいこと
下記ディレクトリ構造にて、Sass + browser-syncを使用し作業をしています。
htmlへ読み込むcssはstyle.css(style.scss)だけで、style.scssにはその他パーシャルファイルのインポートのみを記述しています。
この状態で「style.scss」を更新するとブラウザへ自動的に変更が反映されますが、
「_common.scss」や「_module.scss」等のパーシャルファイルを更新しても、
再度「style.scss」を更新するまではブラウザへ変更が反映されません。
実現したいことは「パーシャルファイル更新時にもブラウザへ変更を反映させたい」なのですが、
そのためには「パーシャルファイル更新時に自動的にstyle.scssを再コンパイルさせる」ことなのかなと考えています。
初歩的なことで申し訳ございませんが、お知恵をお貸し頂けますと幸いです。
よろしくお願い致します。
root/ ├ src/ │ ├ index.html │ └ sass/ │ ├ style.scss │ ├ _common.scss │ ├ _module.scss │ └ _animation.scss └ dest/
var gulp = require('gulp'), sass = require('gulp-sass'), browser = require('browser-sync'), changed = require('gulp-changed'); var paths = { work: 'src', scss: 'src/sass/**/*.scss' dist: 'dist', distCss: 'dist/css' }; gulp.task('server', function() { browser({ server: { baseDir: paths.dist } }); }); gulp.task('sass', function() { gulp .src(paths.scss) .pipe(sass()) .pipe(changed(paths.distCss)) .pipe(gulp.dest(paths.distCss)) .pipe(browser.reload({ stream: true })); }); gulp.task('watch', function() { gulp.watch(paths.scss, ['sass']); }); gulp.task('default', ['watch', 'server']);
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。