I have lot of CSS ressources for my website.
I decided to use gulp to concatenate all of them, by doing the following :
gulp.task('concat_style', function() {
return gulp.src(['./public/adminLTE/bootstrap/css/bootstrap.min.css',
'./public/adminLTE/dist/css/AdminLTE.min.css',
'./public/adminLTE/dist/css/skins/skin-red.min.css',
'./public/stylesheets/font-awesome.min.css',
'./public/stylesheets/ionicons.min.css',
/*and many more*/])
.pipe(concat('styles.min.css'))
.pipe(gulp.dest('./public/stylesheets/'));
});
NB: I know I could reference all the .css files with a wildcard expression but I first though my problem was caused by the order by which they were concatened, so I referenced them in the same order they are in my non-concatened version.
In the concatened version I get the following error :
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag
The link : http://localhost:3000/fonts/glyphicons-halflings-regular.woff2 works when I access it with my browser.
How can I solve this error ?
The problem was that I was concatenating my css with the default concat function of gulp, and the needed font was required by an #import directive (that must always be on top of css file, but was in the middle of the concatened css file).
I ended up using gulp-concat-css, it solved the problem
Related
I would like to accomplish that
.html.erb file, which calls class in the form “class=”, can read the all class defined in CSS files in app/assets/stylesheet, in development environment.
In app/assets/stylesheet, 30 .css files exist and all classes are defined in the files separately.
I think the problem exists in some configuration rather than the code mistake because changing filename of CSS in assets/stylesheet solves the problem.
In my case, "app/assets/stylesheet/admin/users.css" does not work, while "app/assets/stylesheet/admin/members.css" does. (any name except "users.css" is okey).
I attempted the following.
Super reloading the target page in some browsers (Chrome, Opera , FireFox).
Rebooting the OS .
Removing tmp/cache.
Removing “.DS_store” files in app/assets and app/assets/stylesheet.
Writing
"config.assets.debug = True"
in the configure/environments/development.rb
I would like to get information about the question “Why just changing the filename of CSS in assets/stylesheet cause reading error.”
I'm working with the following paradigm for handling my CDN caching:
Each path contains "?version", for example: http://mycdn.com/some-javascript-file.js?123
The same paradigm is used for all of my resources (js, css, images), the problem I'm encountering is images paths in a css file.
For example, I have the following snippet in one of my css's:
"url (../../Images/example.png)"
The problem is that this image path doesn't use the version paradigm, I would like to add the version to the path somehow, is there a nice way to do this, except of the following methods:
1) For each image change - also change the css with some dummy version.
"url (../../Images/example.png?1)" - change 1
"url (../../Images/example.png?55)" - change 2
2) Transfer all of my css's files to be aspx files and to use the code-behind in order to define the version:
"<%= html.VersionUrl("../../Images/example.png")%>"
3) Use dotless lib: http://www.dotlesscss.org/
Any other simple/nice idea?
The best solution which I've found was to change the version tag to be at the beginning of the url and to use url rewrite in order to process the requests.
So if for example I used to had:
http://website/Content/Images/1.png?123456
this will become to:
http://website/123456/Content/Images/1.png
Notice that I use url rewrite in order the process the request so that http://website/123456/Content/Images/1.png will actually bring the data from http://website/Content/Images/1.png
I'm using the GSP Resources plugin (http://grails.org/plugin/gsp-resources) to allow me to use GSP tags inside my css files. However, I'm getting a weird error when using the "resource" tag. Here's the line causing the problem:
background: transparent url(${resource(dir: 'static/images', file: 'servererror.png')}) 0.5em 50% no-repeat;
I get the following two errors on application start up:
2014-01-21 09:39:03,608 [FileSystemWatcher: files=#248 cl=groovy.lang.GroovyClassLoader#484b2882] ERROR resource.ResourceMeta - Resource not found: /static/images/servererror.png
Error
2014-01-21 09:39:04,257 [FileSystemWatcher: files=#248 cl=groovy.lang.GroovyClassLoader#484b2882] ERROR resource.ResourceMeta - While processing /css/servererror.css, a resource was required but not found: /static/images/servererror.png
The resource is there. If I manually type in the path I can access it no problem. If I move the line causing the problem to the "html" gsp file it works. However, since Grails can't find it, it doesn't put in the path correctly in the css file.
Any help is highly appreciated.
Your best shot will be to manually type the path in the css file. The reason for the error is that, the resource is not able to process the resource tags in the css.
You can inject the css file using the Applicationresource.groovy in the conf folder.
grails-app/conf/applicationresources.groovy
modules = {
application {
resource url:'css/servererror.css'
}
}
For a while now I have adopted the practice of writing my CSS in an .aspx page and serving that page as CSS. Primarily this is because a project I was involved on had a development 'CDN' before images were finally hosted on the actual CDN, so when it came to background images I needed a way of changing the URL through the web.config. I also get a few other perks like variables. A small sample:
#id
{
color: '<%= PrimaryColor %>';
background-image: url('<%= PrependCdnUrl("myimage.jpg") %>');
}
Since working on an MVC project I'd now like to incorporate CSS bundling into the original project (a webforms project). The problem I have, an .aspx page is not allowed to be bundled up, I get errors similar to:
(1,1): run-time error CSS1019: Unexpected token, found '<'
(1,2): run-time error CSS1019: Unexpected token, found '%'
...
Does anyone know how I could get this to work?
Short answer: It is not possible.
Long answer: It is possible through some hacks.
Actually there are 2 possibilities that pop into my mind that would accomplish this (they are not tested, not sure if they work out finally tough):
In your IIS you can define which filetype gets handled by which interpreter. You can try to define .css files to use the same interpreter as ASP.NET pages. (not sure if this works)
You can create an .aspx file instead of a .css file where you output the css code you need dynamically. Set the MIME type of the return stream from this dynamic css aspx page to the MIME type of CSS. Then reference your aspx page as css file
I've successfully created an mvc/razor web application that returns css files that have been parsed by razor. Each time there's a background-image I have a razor snippet that writes the URL prefix to the image file name. The CSS now looks like this:
body { background-image: url(#LookupUrl.Image("background.gif")); }
Css files now work fine and I've moved onto trying to get javascript .js files to function the same way but these aren't playing ball.
The code is identical to the css code and it successfully finds the .js file, but razor seems to parse it differently. Here's an example js file:
function testFunction() { alert('test function hit!'); }
testFunction();
Razor seems to think it's code that it should compile, and gives the error:
Compiler Error Message: JS1135: Variable 'alert' has not been declared
> Source Error:
>
> Line 1: function testFunction() {
> Line 2: alert('test function
> hit!'); Line 3: } Line 4:
> testFunction();
After renaming the same file to .css it works fine.
Is there a way of getting razor to function with .js files in the same way as it does for .css?
Here's how I registered the file handlers for razor:
RazorCodeLanguage.Languages.Add("js", new CSharpRazorCodeLanguage());
RazorCodeLanguage.Languages.Add("css", new CSharpRazorCodeLanguage());
WebPageHttpHandler.RegisterExtension(".js");
WebPageHttpHandler.RegisterExtension(".css");
The build provider is registered in PreApplicationStart via the method Haacked outlines in his blog post.
Do I need to remove a handler that mvc adds for .js files?
UPDATE 2 days on
While I got working what I wanted to get working, I would not recommend this method to others. Using Razor to parse css/javascript is flawed without the use of <text><text/> - it's the simplicity of razor using the # ampersand that messes it up. Consider the CSS3 #font-face. Razor hits the # and thinks it should use it as a function. The same thing can happen with javascript, and happened with Jquery 1.5.1.
Instead, I'll probably go back to aspx webforms for dynamic css/javascript, where there's less chance of the <% %> code blocks appearing naturally.
I couldn't understand why CSS worked while JS didn't, especially after the copy+pasted JS code worked inside the CSS file.
I used the find/replace dialogue within visual studio on the System.Web.WebPages.Razor source to search for the string '.js' within the project. There was nothing helpful there so I then went to the System.Web.WebPages project. It found a match in System.Web.WebPages.Util, which is a static class with a few helper methods.
One of those methods is 'EnsureValidPageType' and within there is a try/catch block. Inside the 'catch' block is a comment:
// If the path uses an extension registered with codedom, such as Foo.js,
// then an unfriendly compilation error might get thrown by the underlying compiler.
// Check if this is the case and throw a simpler error.
It made me believe .js has got some special built-in handler with it.
I googled for a bit, couldn't find anything, then looked in the web.config that's within \Windows\Microsoft.NET\Framework64{version}\Config.
In there is a buildProvider mapping for the extension .js to
System.Web.Compilation.ForceCopyBuildProvider
After removing this buildprovider in the website's web.config, .js files get compiled and work as they should!
I'm still not too sure what the ForceCopyBuildProvider does or is for but I wonder if it's for visual studio. Various extensions have different Copy/Ignore build providers registered.
Once again apologies for answering my own question but I hope the comprehensive(waffley) answer might help others out.
You could try using the special <text> node to indicate to the Razor parser to treat the content literally:
<text>
function testFunction() { alert('test function hit!'); }
testFunction();
</text>
The default Razor parser uses the HtmlMarkupParser to handle the markup components of your template. There isn't currently any alternative parsers that support other markup languages (which you would need to treat the javascript code language as). If you did create a new markup parser, I would imagine it would be quite difficult to separate the code and markup (i.e. the C# and the Javascript).
What you could do, is use the <text></text> wrapping elements to enforce the parser switches to markup mode when that section of the template is reached, e.g.
<text>function testFunction() { alert('test function hit!'); }</text>
It's not pretty, but it should do the trick.