I'm wrecking my brain trying to figure out how to word this so it's understood.
I'm basically using PhpStorm. I have a gulpfile that generates a minified CSS file from a src/sass dir, which gets renamed and placed into the public/css folder.
What I would like to do is automatically upload this minified css file to the server using PhpStorm's deployment tools.
I'm able to get all of the .php files to upload (obviously) and the Sass is able to auto-upload (I disabled this), but I can't figure out how to automatically upload the CSS file that's generated. It's annoying having this fluid setup and then having to manually upload the css file each time I do a few edits.
Any ideas? No pun intended, lol.
Files created or modified by gulp/grunt/etc are considered external changes as they are not created in IDE itself but by some process that runs completely independently (e.g. gulp -watch) or was launched from IDE.
Therefore you need to enable similarly named/appropriate option in Deployment option so that IDE can upload them as well. That option is called Upload external changes -- https://www.jetbrains.com/help/phpstorm/options.html
Once IDE detects changes (e.g. when focus gets back to IDE or by running File | Synchronize) the file should be uploaded using current deployment entry in a same fashion as other (modified in IDE) files.
When I open a .scss file and save it Dreamweaver compiles it fine for the first few times. But after 4-5 saves it stops compiling the CSS and gives me a "Cannot lint the code. Click here for troubleshooting" error. Then if I quit dreamweaver and then restart it, I can compile 3-4 files then the same error starts up again. I visited one of dreamweavers help articles that instructed me to create a NodePort.json file and put { “toolingport” : 8010 } in it and I did but that didn't help. I would love to use dreamweaver if I can, but I am open to another way to compile scss files if it is easy enough.
I recommend you check out grunt. http://ryanchristiani.com/getting-started-with-grunt-and-sass/ - In my humble opinion using Dreamweaver to do anything "tricky" is best avoided... if you get into grunt you'll never look back :)
Especially when you hook it up to LiveReload. At that point you'll save your SCSS (in Dreamweaver) and the browser will automatically refresh showing your changes :) It's magical. (Plus it does lots more)
I am new user of the Bracket text editor. Can anyone tell me how to integrate SASS extension and how to use it?
You need to start by reading the samples on the current github project as a beginner reference to making your own: Bracket Sass
After that, you should get the idea: in the base root of your folder you need to include a .brackets.json file, dot at the beginning in order to make it invisible to your system. In this file, you will write in your own way (or by following the read me I linked you to) the Sass compilation parameters for your Brackets project. Therefore, keep in mind your project structure, your assets and dependencies for Sass.
This should be only your initial setup, restart Brackets for double measure and see what happens.
I'm using sass for a project. I keep the CSS file open sometimes, but every time I save the .scss file VS asks me if I want to reload the CSS file, which I do. Is there any way of telling it to always reload the file type without prompting?
In Tools/Options, navigate to Documents and check "Auto-Load changes, if saved."
EDIT: note that this will affect all files; as far as I know it's not possible to enable this selectively. I'm sure an extension could change that!
Was wondering if there's an extension or macro or something that looks through your solution and gives out a report of which js/css/image files are not being referenced anywhere in code?
I have a large project and over time it has accumulated dust. Other than manually searching for each file's usage, is there any other time saving way?
There's a Visual Studio Extension that searches for unreferenced image files. It finds all image files in your project and then scan all aspx/cs/ashx/css/js files for references. It has not yet been updated for Visual Studio 2012.
http://visualstudiogallery.msdn.microsoft.com/fb7a9b9c-08e1-4bb4-91b4-8e512feb5a1b
Update You will not find a tool that can systematically identify unused resources, because JavaScript, CSS, and image files can be loaded dynamically. This article shows how to load JavaScript and CSS dynamically, and it's a straightforward task in JavaScript to load an image dynamically. It's easy to imagine a scenario in which the image name is loaded from an external data source, or concatenated from another field value plus ".jpg". Clearly any tool that attempted to scan your source to find unreferenced files would miss these resources.
That said, you can search for hard-coded references to .js, .css, and .jpg files using Visual Studio's search by regular expression feature, or by using a high-powered text editor like Notepad++ with a Regular Expression search feature.
For example, to use Visual Studio to search for all files ending in .js that are referenced in ASCX ir ASPX pages, go to Edit/Find and Replace/Find in Files, set the search expression to .js> switch on
"Use Regular Expressions", and set "Look in these file types" to "*.aspx; *.ascx".
("\" escapes the ".", and ">" means end of word, so that "foo.js" is found, but not "foo.jsx". Visual Studio has its own Regular Expression syntax, which is documented here)
In addition, the tools in my original response below can give a good picture of what JS/CSS/IMAGE resources are actually getting used when your site is loaded. When used in conjunction with a testing tool like Selenium, these should allow you to remove resources with confidence.
There are several tools you should look at:
WARI--Web Application Resource Inspector seems the closest fit. According to their website:
WARI scans your web application and examines dependencies between JavaScript functions, CSS styles, HTML tags and images.
The goal is to find unused images as well as unused and duplicated JavaScript functions and CSS styles.
JSCoverage is a code coverage inspector for Javascript.
For CSS, there is an online tool at http://unused-css.com/ and a Firefox extension called DustMeSelectors
The extension in the selected answer above only works in vs2012 while Code Maid works in vs2010 - vs2014:
There is a free extension called Code Maid that "is an open source Visual Studio extension to cleanup, dig through and simplify our C#, C++, F#, VB, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and TypeScript coding." Does images as well.
Solution Features
is semi - manual
isn't an extension
looks long but is not complicated or difficult
works for just images or all files
overcomes all the ajax tricks
should work with any project or version of Visual Studio
Steps
Run the website in Chrome with debugging turned on (press F12 before launching website)
Completely exercise the website. Make it download everything that it will ever download.
Go to the Network tab.
On the file grid, Click on any of the images that appear in the list (doesn't matter which one). This will make all column headers but Name go away.
Click on the Name column header, to sort ascending.
Do CTRL+A, CTRL+C to copy all file names.
Paste into a new Google spreadsheet (in google docs) into cell A2.
Repeat steps 6 and 7 if for any reason it didn't copy all the file names. Scroll down.
Go into your actual website images directory (or whatever directory you are interested in comparing) in a command prompt and issue dir /b. Copy this into the clipboard (mark function) and paste into cell B2.
In cell C2, paste this formula =not(isna(VLOOKUP(B2,$A$2:$A$TheBottomOfA,1,false))). Alter TheBottomOfA to be the last used row in column A.
Copy the formula down for all your values in column B.
In cell C1, type Is Used. In cell B1, type Name. Add a data filter on all the values in columns B and C. Set the filter with the mouse in C1 to show only Is Used=FALSE.
Result
What you're looking at in Column B is a list of files you are not using.
Note
I recommend moving the unused files to an offline folder instead of deleting them.
Warning
You still need to use common sense. BRAIN=ON
2022 solution
you can use this extension in vscode to find all unused exports
If you're using a new version of Visual Studio and can't use the extensions, what I did was this:
Exclude all target files.
Find ",,," (this indicates an absolute resource reference) and include each resource found. Note, you should try any unique keywords relevant to your references.
Repeat step 2 until Visual Studio stops opening files (if no new matches are found, already opened documents will come into focus).
Try building project. If you happen to miss a resource, Visual Studio will let you know. In that case, repeat steps 2-4; it is worth nothing this will rarely ever be necessary.
I've only had to do this once and I spent ten minutes, at most.