LESS/SASS with Sublime Text - gulp

I am working with LESS/SASS files
I press CTRL+S (in Sublime)
.SCSS is compiled to .CSS (GULP)
My Sublime Text automatically detects changes inside compiled CSS
Sublime Text automatically sends compiled .CSS file to server (with path) (NOT LOCALHOST!) by sFTP (I use this Plugin in ST3)
Does anybody know how I can do this?
Should I use a Plugin to Sublime Text 3/GULP, if so then what Plugin?

Well if you don't want to learn SASS or LESS on your localhost, why not create a new CodePen ?
You just have to go in the CSS container, click on the cog (settings), and chose SASS or LESS as your preprocessor.
Then you're good to go !

Related

How to build scss/sass using sublime editor. is it possible to use(Sublime) for SCSS/SASS?

I tried much time to use sublime editor but I have no idea how to use sublime editor for building scss/sass file.
Create a new file with .scss extension in your project as start writing SASS styles. Add the file/ import the file in your desired location/component for integrating it with the view.
This is a plugin for Sublime Text 2/3 providing four build systems for Sass/SCSS files SASS Build.
I hope it would help you.

PhpStorm ignore file

I'm using webpack to compile all my JavaScript to a single bundle.js file. PhpStorm is running very slowly at times because of this.
Is there a way for me to let PhpStorm ignore this file all together?
Right click on the file in the project tool window and select Mark as plain text from the context menu. That should keep PHPStorm from inspecting the file.
You can also do the reverse: if a file is marked as plain text, you can right click and mark it back to its regular type.

How to make atom detect .jade correctly?

I want to see jade highlighting when I open .jade file on mac.
Currently I have https://atom.io/packages/language-jade installed, but when I open .jade file atom detect it as html.
I install https://atom.io/packages/file-types and add to config file (atom->open your config):
"file-types":
jade: «source.jade»
It don't change anything at all.
I think default atom language-html plugin override my settings.
If I disable language-html, then atom detect .jade correctly and highlight it properly.
But without language-html plugin atom detect html as plain text and don't highlight it at all.
What I should to to get both html and jade proper highlighting?
With all best regards. Anton.

Twig syntax highlighting sublime text

I want to know how can I have highlighting syntax for TWIG in Sublime Text.
Actually when I open a TWIG file all fonctions and conditions are similar (white on black) :
Documentation
Syntax highlighting and auto-completion for Twig in Sublime Text 2is possible with : PHP-Twig.tmbundle
TWIG Doc "IDEs Integration" : http://twig.sensiolabs.org/doc/templates.html#ides-integration
Bundle's Github : https://github.com/Anomareh/PHP-Twig.tmbundle
Bundle's Documentation : https://sublime.wbond.net/packages/PHP-Twig
Download
You can clone the project with :
git clone https://github.com/Anomareh/PHP-Twig.tmbundle.git
Or download it directly from the Github (last master version) : https://github.com/Anomareh/PHP-Twig.tmbundle/archive/master.zip
Installation
To install this bundle in Sublime Text, a few extra steps are required.
Open Sublime Text and in the Preferences menu click Browse Packages.
In the directory that was just opened, create a new directory PHP-Twig/.
Copy the content of this repo into the directory you just created.
Move the contents of the PHP-Twig/Syntaxes/ directory to PHP-Twig/
Restart Sublime Text.
Apply
To apply syntax highlighting on your Twig HTML files :
Open a .html.twig file
Go to View menu → Syntax → Open all with current extension as → HTML (Twig)
That’s it. It should work by now.
Screenshot
You can also install PHP-Twig.tmbundle through Sublime Text's Package Control.
With Package Control installed:
Go to Preferences → Package Control → Install Package
Type "Twig", and select PHP-Twig.
It will install the same version of #antoine-subit's answer, and will automatically use the correct syntax for any Twig file you open
If you're not used to Sublime, don't forget to click on the bottom right of the sublime window (a drop up/down should appear) and then select "HTML (Twig)" from the list of languages in order to enable the package!
I'm working on Ubuntu, I have solved the problem by downloading https://github.com/Anomareh/PHP-Twig.tmbundle/archive/master.zip and I have done what was wrote inside ReadMe file.
After restarting Sublime Text choose the option called “HTML (Twig)” in “View->Syntax” menu to see the new highlighting.
To automatically highlight all twig files, open any html.twig template and select
“View->Syntax->Open all current extension as…->HTML (Twig)”

Save a file style.min.css automatically when I save my style.css or .js on sublime text

I would like to know if a plugin for SublimeText is available to optimise automatically my .css and .js (like http://cleancss.com/) when i save my file ?
Like that, in my html code I have just to link my .min.css instead of .css and it's always updated.
Thx
If you go to Package Control and search for minify you'll get a number of options. It looks like some of them are web-based, and some rely on local compilers. There are also a couple that only do JavaScript, and the rest do JS and CSS.
Good luck!