I am making use of System.Web.Optimizations BundleConfig in my project. I'm running into an issue with a specific jQuery plugin that I'm using on my site. If I add the file to my ScriptBundle it works fine in Debug mode but throws JavaScript errors when I am in Release mode (i.e. set Web.config debug=false). I'm thinking something isn't getting minified correctly.
All others scripts are not giving me any problems so I don't want to affect behavior for all bundles but is there a way to customize for a specific bundle to tell it to use a specific version in debug and the min version in release.
I know the default behavior is for it to look for .min files but I just can't seem to get this to work. Can anyone tell me what I may be missing here? Thanks for your help.
Here is example I split it out by self. This works in debug but not when i set debug=false in web.config
ScriptBundle layoutBundle = new ScriptBundle("~/jsbundles/jquery/layout");
layoutBundle.Include("~/Scripts/plugins/jquery.layout-latest.js");
bundles.Add(layoutBundle);
If you just want to turn off minification for one bundle, you can simply switch to a normal Bundle instead of a ScriptBundle and it won't be minified. Then it will serve that bundle in whatever form that you included without running it through minification.
Related
Migrated existing webpack project to use webpack 3.5.5 and its new config. Using express server instead of webpack-dev-server.
I had to setup the resolve in webpack as below.
const resolve = {
extensions : ['.js'],
modules : [
'node_modules',
'src',
'testApplication'
]
};
When i debug this webpack application using chrome developer tools I can see the 2 versions of source files.
The first one under webpack://
It is exactly matching with the source
The second one under webpack-internal://
This one is the babel compiled version of the source.
My questions are
Is there someway where I get only a first version of the file instead of both?
I thought node_modules should have been implicitly defined as a module rather than me specifying it explicitly in resolve, is there someway that I can make the build work without having the node_modules defined in resolve.
After using the same source code with webpack 3.5.5(migrated it from webpack 1.14.0) the express server start seems to have slowed node. My guess is that having specified the node_modules in modules under resolve has caused it. Any ideas?
You can configure the source maps using Webpack's devtool property. What you want is devtool: 'source-map'(source). This will only show you the original source code under webpack://. Note that there are other options that might be more appropriate for your use case.
["node_modules"] is in the default value for resolve.modules. However, if you specify resolve.modules you need to include "node_modules" in the array. (source).
It seems strange that you specify "src" and "testApplication" in resolve.modules. If you have local source files you should require them using relative paths e.g. require("./local_module"). This should work without having src in resolve.modules
Specifying node_modules in resolve.modules is not responsible for any slow down (see 2.). There are many possible reasons the slow down. E.g. maybe you are erroneously applying babel to the whole node_modules folder?
It seems to be resolved (or at least greatly improved) in Chrome 66.
I have the following problem: phpstorm do not recognize jquery methods and here and there I see
Unresolved function or method $()
This was bugging me for sometime but finally I tried to get rid of it with File->Settings->JavaScript->Libraries and adding jquery as a global / project.
My library setup looks like this:
But is has not changed anything. I still see those pesky notices. Does anyone know how to get rid of them?
There is a really stupid workaround,
Download the Library (in this case jQuery) from inside the IDE itself.
Open up settings (Ctrl + Alt + S on Linux)
Navigate to Languages & Frameworks -> Javascript -> Libraries
Click Download and choose jQuery
Hopefully the errors will vanish
EDIT:
After running the IDE through Fiddler, I realised this only solves the problem because of the version the IDE downloads.
So, the correct workaround is to Add older, non-AMD jQuery versions as a Global scoped Library and add the latest one as a Project scope library.
The latest non-AMD versions are:
1.10.2 for 1.x series. And, 2.0.0 for 2.x series.
I had the same issue with version 1.11.2, and resolved it simply by adding the uncompressed version into my js folder.
Just copy the uncompressed version of jQuery into your project folder.
you don't even need to import it into your project, just copy it to javascript folder.
The jQuery v1.11.0 shows exactly the same behaviour here as well. At the same time previous version 1.10.2 works fine in IDE (no warnings).
I think it has something to do with "AMD-fy jQuery source" ticket (http://bugs.jquery.com/ticket/14113) -- looks like IDE has some issues figuring out this style.
If you wish (and can) -- roll back to jQuery v1.10.2 (which is like half a year old, which means it's stable and still good to use).
Hopefully IDE will be able to properly parse this new jQuery style in next release.
Actual ticket: http://youtrack.jetbrains.com/issue/WEB-10908
If you import both 1.11.0 and 1.10.2 in phpstorm it will be resolved
You don't have to rollback your project.
Sorry for the noob question but I'm trying to start up a new application with Sails and include my assets. I'm using Bower to manage my packages for things like Bootstrap and JQuery. I had a read of this question and added a .bowerrc file which is now installing my Bower components to /assets.
I'm now confused as to how I should proceed to add these files into my project. It seems as though I can't just do a <script> tag in the header as I'm used to because it's giving me a file not found. Reading through the sails documentation it seems like Grunt should be creating a .tmp/public/assets folder in my project, but whenever I run sails lift and go to .tmp/ there is nothing in there.
I also read in the documentation that I should be using some kind of asset injection, I tried adding this to my HTML and it seems like it doesn't do anything.
My other question is around how I go about referencing images in my HTML. Obviously I can't just do something like src='assets/images/image.png, how should I go about this? Is there something really obvious that I'm missing?
Sails use grunt tasks to do lot of things during lift and build. You can get much better look how everything work if you take some time and check what is inside Gruntfile.js from root of your sails project.
About your specific question here is some information:
- from sails docs: "In order to take advantage of asset injection, minification, and concatenation you must put your assets in folder under assets/linker". This exactly mean that everything what you will put inside assets/linker directory will be affected by grunt tasks during lift. It mean that all files/directories from linker will be copy to .tmp/public and also some of that files will be processed before saved to .tmp/public.
- About adding tags. If you take a look at Gruntfile.js you will find this variables: var cssFilesToInject = [...] and var jsFilesToInject = [...] which contain files that will be automatic added to layout header during sails lift.
- About your 'other question', yes you can do something like 'src='linker/images/image.png' if you move that files to linker directory (assets/linker).
I hope this help :).
So i'm using brand new PHPStorm 7, which is supposed to have full Compass support, with syntax highlighting and stuff.
I successfully install compass to my project directory, PHPStorm offers me to use compass sass watcher, automatically finds compass.bat and my config.rb .
And then, nothing happens - my #import "compass" still triggers unable to resolve import from watcher, i don't get any code completion or search features. The only solution i know was an old trick of adding compass stylesheets directory as a resource root to my project.
So what i'm asking - is this the way it's supposed to be, or am i doing anything wrong, because i don't think manually importing a library into every project is a proper way for supposed library support.
After all, there is an issue on Windows.
There's the solution, and it works. Thanks LazyOne.
http://youtrack.jetbrains.com/issue/WEB-9139
I have following case: I want to use uncompressed js/css files during development (to debug js for example) but on production I want to switch automatically to minified versions of that files.
some simple solution is to put in your template:
<script src="some_js.{% if not debug %}min.{% endif %}js"....
but this require manully providing that such file exist and to do minifaction manullay after original file change.
How do you accomplish this in your projects? Is there any tool for this?
Did you try django-compress ?
See http://djangopackages.com/grids/g/asset-managers/ for a fairly complete list of available asset managers for Django...
If you already are using django-compress, you should have a look at upgrading to django-pipeline, which is a well maintained fork, with a lot of new features. I encourage everyone to who is using django-compress to switch to django-pipeline instead: * django-pipeline documentation
Django-compress is no longer being maintained. Try https://github.com/cyberdelia/django-pipeline instead.
I've been using webassets and so far I'm very satisfied. What I really like about it, is that you're still able to define your CSS and JS files inside of your templates, instead of in the project configuration.
Documentation can be found at: http://elsdoerfer.name/docs/webassets/
As of the end of 2016, these answers are mostly outdated.
Check here for a few options:
https://gitlab.com/rosarior/awesome-django#asset-management
At the moment, django-compressor is a good choice, but there are alternatives depending on what you want to do. I believe webpack is becoming popular these days as well.
I wrote this Makefile to minify and concatenate my JS and CSS files. It depends on the YUI Compressor JAR.
After updating a file, you still have to run make though. Nevertheless, you can make it run when the server starts and/or reloads, or setup a commit-hook on your SCM.
Of course you still need the {% if not debug %}, but it's a small price to pay IMO.
Showing the simple usage:
$ make
[css] static/css/first.css
[css] static/css/second.css
[css] static/css/third.css
[css] static/css/and_so_on.css
[tag] #import url("static/css/all.css");
[js] static/js/first.js
[js] static/js/second.js
[js] static/js/third.js
[js] static/js/and_so_on.js
[tag] <script type="text/javascript" src="static/js/all.js"></script>
Done.
Just released an open-source project that watches directories for changes and auto-minifies JS, auto-compiles SASS/SCSS, runs command line operations, etc.
Check it out at http://devWatchr.com/
It runs using python and pyinotify on your system during development.