gruntjs - How do I get Grunt to recompile dependent SASS files? -
i'm trying work way through updates visual studio 2015 including using grunt , on.
i can grunt recompile .scss
files when change, have problem. use sass theming, , lot of css in central _main.scss
. want when edit file, should recompile theme-*.scss
files include _main.scss
.
is there way tell watch
or stuff recompile things when dependencies change? if have specify dependencies manually?
i don't know if there's way follow dependencies 1 file another, can watch changes in .scss
files , run sass task update theme files.
so you'll have sass task this:
sass : { build: { files : { 'path/to/compiled-foo.css': 'path/to/theme-foo.scss', 'path/to/compiled-bar.css': 'path/to/theme-bar.scss', // or more 'path/to': 'path/to/theme-*.scss', } } },
and watch task this:
watch : { themes: { files : [ 'path/to/_main.scss' ], tasks : [ 'sass' ], options : { // may change these better suit needs spawn : false, interrupt: true, livereload: true }, }, },
the downside of themes compile each time change _main.scss
. if have different files watch different themes can have more tasks inside watch
(instead of themes
can make theme_foo
, theme_bar
call different tasks (e.g.: sass:theme_foo
or sass:theme_bar
) , recompile theme.
you can run grunt watch
on specific task: grunt watch theme_foo
, won't update theme_bar
theme_foo
.
edit: can modularize _main.scss
becomes _foo.scss
, _bar.scss
, _common.scss
, , change _common.scss
when it's change affects themes, , _foo.scss
when affects theme_foo
. way can monitor _foo.scss
, update theme_foo
when changes; or update themes when _common.scss
changes.
edit 2 (based on comments):
lets have 2 themes, blue , red. we'll have 2 sass tasks (one each theme):
sass : { red: { files : { 'path/to/compiled-red.css': 'path/to/theme-red.scss', } }, blue: { files : { 'path/to/compiled-blue.css': 'path/to/theme-blue.scss', } }, },
right now, if run grunt sass
update both themes. if run grunt sass red
update red theme.
to make watch
update required theme, you'll have 2 tasks:
watch : { red: { files : [ 'path/to/theme-red.scss' ], tasks : [ 'sass:red' ], options : { /* ... */ }, }, blue: { files : [ 'path/to/theme-blue.scss' ], tasks : [ 'sass:blue' ], options : { /* ... */ }, }, },
notice red
calls sass:red
(the task theme , theme). same happens blue
calling sass:blue
.
to make update every theme when _main.scss
changes, add 1 more task inside watch
:
watch : { red: { files : [ 'path/to/theme-red.scss' ], tasks : [ 'sass:red' ], options : { /* ... */ }, }, blue: { files : [ 'path/to/theme-blue.scss' ], tasks : [ 'sass:blue' ], options : { /* ... */ }, }, all: { files : [ 'path/to/_main.scss' ], tasks : [ 'sass' ], options : { /* ... */ }, }, },
now all
watching _main.scss
, , when changes every task in sass
run (i.e. sass:red
, sass:blue
).
Comments
Post a Comment