Compile multiple Sass files to multiple destinations in VS Code - html

I am trying to compile Sass files in Visual Studio Code but I have two Sass files and I want them compiled inside two separate css files. I have sass/global.scss and sass/media.scss and I want them to compile into css/global.css and css/media.css
If I set the savePath to /css both files are compiling into media.css
How can I set global.scss to compile to global.css and media.scss compile to media.css
I am using the Live Sass Compiler extension.
Thank you.

Related

How to enable autominify of .js and .css files in PHP storm 10.0.3?

I want to see CSS and JS files normaly when editing them. But when I save/upload them to server I want them to be minified. Is there a plugin/setting that does this in the current version of PHPstorm?
PHPStorm doesn't have any built-in functions for minifying files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-uglify and grunt-contrib-cssmin tasks, for example . Both tasks support merging and minifying files. You can run the tasks using Grunt console. Or, you can use YUI Compressor and set it up as a file watcher (https://www.jetbrains.com/webstorm/help/minifying-javascript.html, https://www.jetbrains.com/webstorm/help/minifying-css.html)
You can add css, or js File Watcher in PhpStorm, see their docs, using uglify or yuicompressor. All configurable from the IDE
After proper setup, your .css and .js files will be minified locally( PhpStorm shows them nicely together in the left sidebar where your files are). Each time you change your original css or js file, minified versions will be autogenerated.
When uploading to the server, you just need to upload automatically minified versions.
Very convenient. I use it for non-Symfony projects ( in symfony i use assetic for minification and combining assets into one file)

How to organize SASS files with Gulp?

I have the following Gulpfile.js: http://pastebin.com/khEF08GC
When generating the "sass" task, the Gulp creates .css files for each of .scss, I would like it to generate one file based only on the file "style.scss" which is where the #import.
But it happens whenever there are changes in any of the directory _sass.
I have used this solution, specifing each .scss final file and editing watch task.

How does Cocos2d-x keep code (C++ file) safe from decompilation?

I just decompiled APK using dex2jar and JD-GUI to access the source code, but I could not find any .h or .cpp files in classes.dex folder. I want to know how does Cocos2d-x take care of that issue and where are all these files stored?
the c++ files are compiled into a dynamic library, in lib/armeabi/, like libxxx.so

Bootstrap SASS settings in Jekyll

I don't understand how I can set the precision required for bootstrap sass through jekyll.
Besides, I can't understand how jekyll automatically loads the files .scss who I placed in everywhere if I only set the _sass dir.
For example in my directory CSS I have a file named style.scss and it automatically generates the right css files in .site/css.
Below the piece of code about SASS settings:
sass:
sass_dir: _sass
style: :nested
Thanks for your help,
Regards,
Silvio S.
Sass precision
Sass precision cannot be set in Jekyll configuration. It can only be set in command line or in a ruby script (plugin)
What is the jekyll sass entry point ?
Jekyll will process any file with a front matter with the appropriate converter. For sass and scss files it will use jekyll-sass-converter.
css/main.scss is processed, it is your entry point.
During this processing, the converter looks for #imported files in the sass_dir path, which by default is _sass. It can be any path in your root folder.
Sass and scss files, once processed, are outputed with a css extension.

Bower and Grunt workflow

I just want to get an opinion on my workflow. I am aware of Yeoman and have on purpose decided not to use it. My workflow goes like this:
Run bower install to install all project assets dependencies.
Run grunt which copies all js files from the bower components folder to a new js folder and all css files to a new css folder.
Further use grunt task to concatenate and minify all js and css files from the new folders and put them in a dist folder.
Refer to the final minified css and js in dist folder from HTML.
One thing i certainly don't want to do in my grunt task is to perform dependency specific task e.g. grab all js file from bootstrap folder into the new js folder, then grab all js file from prettyphoto folder into the new js folder. I want the grunt task to be as generic as possible so that i can use the same gruntfile in any project no matter what the bower dependencies might look like. The reason is if i should spend all those time writing my gruntfile for each project, why would i not just grab the source codes for all the dependencies in conventional way.
So there is a grunt-contrib-copy plugin to copy files from one place to another which i use to grab all js files from inside the bower's components folder. The problem is most of the bower components come with regular js and minified version of it. So, i am copying both of them and concatenating and uglifying them. So duplicate code!
Does my workflow makes sense? Is so, how can I get rid of the problem I mentioned in the paragraph above?
If I'm understanding correctly, you should take a look at grunt-usemin. You can wrap your js tags in <!-- build:js js/foo.js -->. The useminPrepare task that's included in the package will cycle through any scripts (or css, or images, etc.) that are there and dynamically add them to the concat or uglify task.
The one downside I've found is that the usemin task is fairly slow but hopefully if this pull request is implemented, things will get much, much faster.

Categories