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

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

mercurial graft feature, can it copy? -