Lets assume I have 2 static assets (html files) in my project, files a.html and b.html.
File a.html has a link to file b.html inside of it.
Now I run a build and the 2 files got their name changed and everything is working fine (by the filerev module).
Now I need to make a small change only in file b.html -> filerev will give a new name to file b.html in the next build. Because file a was not changed it will have the same name as the prev build.
Now, in the next build usemin will go to file a and will fix the link to the new file b name and everything looks fine. But not, because file a still has the same name as prev build, users will get a broken link when trying to access file b from a.
I guess a workaround is to instead of having hashes of the file names, generate random file names each time.
That way you are generating all files so it is not optimized, but you prevent the caching problems between versions, while still allow caching of the browser for the same version.
Using the grunt-angular-template task can solve this issue as it is adding all the templates to the $templateCache of angular, so the no real requests will be made to the server when a template is requested and the recent template is loaded from the cache. Of course it is not ideal as in big applications you will not want this as this may increase your js file size
Related
I have created one project in yii2-basic. In that I had done the some changes in the bootstrap.css in the web/assets/dir/.
Now I need to deploy this into another directory. I copied that project into another directory. Then I run in the browser. The changes I had done in the files are not affecting to the site. Then it refers to the another file for css.
I can't find the correct way to do this. Can anyone show me the correct way to do this?
for changing the css you should change the original in the
.\basic\vendor\bower\bootstrap\dist\css
then minimize it
and then in the dir web\asset you must delete the dir where is place the bootstrap (bootstrap-min.css i guess) files
There isn't a fixed name for this asset dir, you must find yourself the correspondent dir containing all the bootstrap part (css, js , fonts). and then remove (cancel) this dir.
Removing this dir when you accessing to the app the dir is newly recreate (normally with another asset id name).
If you don't do this when you copy a project in a new dir, at the first access the asset directory are newly create and the code you have change is not reached by application.
My less style sheets are located in my /public folder for now. I'm trying implement them on my meteor app but to no avail.
This is the error I get:
The stylesheets are located in the /less folder, which is inside the public folder, so the URL should be correct. By the way, all those files that are in the screenshot above are files that import dozens of other variables located deeper in the folder.
I also checked and I have the latest version of less installed. Any help would be appreciated.
The public folder isn't the right place to store the files. Files stored in a “public” folder are served to visitors. These are files like images, favicons, and the “robots.txt” file. So they get served 'as-is', not processed by LESS and served as CSS.
More about Meteor folder conventions.
After discussion in the comments, it seems something is not working right in your less compiler, the less file should not be in the public folder, as already mentioned, and you should not need to include it with a script tag. You can follow these steps to create a new app and test less and see if you can find a difference between this and your current app.
Create a new meteor project
meteor create test
Add less
cd test
meteor add less
Start your server
meteor
add a file sytles.less to the top level folder with this...
.fun {
color: red;
}
Update the test.html file to add the fun class to the text output...
<div class="fun"><p>You've pressed the button {{counter}} times.</p></div>
Load the page, the text should pick up the class and become red. No link to the styles.less file needed. You can try moving it around to different folders, it worked fine from client for me as well. Look around and see what else might be different.
If you still have issues, try providing more information on how the project is set up.
I'm currently using YUI Compressor to compress my CSS files in a project which worked fine but because of multiple files for plugins I decided to use subfolders in my CSS folder. How can I make the File Watcher also work on subfolders? I can't seem to find any documentation on this, nor have I found anyone with the same problem on the web.
I don't mind if all CSS files throughout the whole project scope gets minified, but I want to avoid defining new File Watcher every time I create a new subfolder.
PS: I see a checked "Track only root files" option in the Edit Watcher screen, but it's greyed out, so I can't turn it off. Don't know why this option is provided, since it always seems to be greyed out, no matter what settings I try.
Not sure i understand what subfolders are meant. With default scope (Project Files) all .css files in the project (root folder with all subfolders, recursively) are watched - why do you need to create a new watcher when adding a folder? Do you use some custom scopes in your watcher(s)?
Found it!
The "Track only root files" option not being optional was not the (or atleast not the whole) problem. This was bypassable by not using the default YUI Compressor file watcher template but creating a custom one.
The real problem was that my scope was set to Project files (the Root of the project) but the Arguments string being set to $FilePath$.css -o $FilePathWithoutAllExtensions$.min.css. What this means is that The watcher was searching for C:/[PROJECTPATH]/[SUBFOLDERS]/[FILENAME].css in the Project root, and then outputting it into the Root of the project (-o $FileNameWithoutExtension$.min.css).
With some fiddling with the Arguments and the Insert Macro's function i made this new Arguments string: $FileDirRelativeToProjectRoot$\$FileNameWithoutAllExtensions$.css -o $FileDirRelativeToProjectRoot$\$FileNameWithoutAllExtensions$.min.css. It now watches all [FILENAME].css files and places the minified versions in the same folder of the original.
Using the Show console: Always instead of Show console: Error option really helped me figuring out this problem since not finding a file to minify, based on the arguments, apparently is "not an error".
Hope this explanation will help to safe some frustration and hours for everyone who encounters this problem.
I struggle a while with this also due to the fact that you always have to apply settings, make some change on the SCSS File and see if it's working.
My setup is working find now for a following structure:
// Source
./scss/
- styles.scss
- _variables.scss
- subfolder/
- more-styles.scss
// Output
./css
- styles.css
- subfolder/
- more-styles.css
My File Watcher Settings look like that:
// Program:
sass
// Arguments:
./$FileDirPathFromParent(scss)$$FileName$:../css/$FileDirPathFromParent(scss)$$FileNameWithoutExtension$.css
// Output paths to refresh:
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
// Working directory:
$Projectpath$/scss/
One of the keys was to set the working directory correctly, for example $FileDir$ is just the SCSS file is in, so the relative paths are wrong.
I used yiibooster I have changed many styles under /assets/73dd67/bootstrap/css/bootstrap-min.css
But when I changed my webapp name, the CSS files not found, I mean the folder '73dd67' changed to '253ft6'.
The same case when I moved my webapp to another computer. The '73dd67' folder changed again in another name.
What can I do so I can keep the CSS formatting?
Thanks for your answers
Asset folder have only cached files. You made changes in cached file not actual file.
So find the actual location of bootstrap-min.css and do your changes. After doing changes, just remove all cache folders inside the asset folder. Then you can see the output in next refresh itself.
Hope you are using yIIbooster as extension. So do your changes in extension css/bootstrap-min.css file.
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)