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

Popular posts from this blog

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

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

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

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

android - Crash when clicking button with custom theme -

-
i creating custom theme button , using android:onclick event of button xml handle click of button. due reason crashing below exception java.lang.illegalstateexception: not find method myonclick(view) in activity class android.view.contextthemewrapper onclick handler on view class android.widget.button id 'button1' and working fine if remove theme attribute button, below theme button <style name="buttontheme" parent="@android:style/widget.button"> <item name="android:textcolor">#ff0000</item> <item name="android:shadowcolor">#ff000000</item> </style> and button defined in xml below, <button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textview1" android:layout_margin="20dp" android...
Read more