Conditionally include JS script in html - javascript

I am making a simple website hosted on Github Pages and use CDN to include several script files:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
During development on a local machine it is sometimes useful to include full versions of scripts to simplify debug, but on target server I'd prefer to use minified scripts, i.e. include angular.min.js instead of angular.js. Is there a way to have "conditional include" in html, or do Github Pages have some mechanism to substitute parts of last submitted files?

The Jekyll documentation says you can use the Jekyll environment to conditionally include code when building the site. For your case:
...
{% if jekyll.environment == "production" %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...
Another option suggests using another config file specifically for development.
_config.yml sets environment: prod.
_config_dev.yml sets environment: dev.
Running jekyll build --config _config.yml,_config_dev.yml in development, the second config file overrides the first and sets the environment to dev. GitHub Pages runs jekyll build - which only uses _config.yml - and would have environment set to prod. You could use a similar syntax to the above to conditionally include the file.
...
{% if site.environment == "prod" %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...

Related

symfony inline asset with assetic

I have the following code based on Symfony2 docs:
{% block javascripts %}
{% javascripts filter="?jsqueeze" output="js/app.js"
"%kernel.root_dir%/Resources/assets/js/one.js"
"%kernel.root_dir%/Resources/assets/js/two.js" %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
which works like charm.
What I want to do, is instead of
<script src="{{ asset_url }}"></script>
use something like:
<script> ... inline asset contents here ... </script>
I tried assetic docs as well as digging around AsseticTokenParser and AsseticNode classes, but couldn't find a variable which references to the actual filepath instead of url.
Normally I do it with css rather than js, but it should be the same concept.
thanks!
In production mode, symfony generates a link to a static file, which can be included directly into the template. This file needs to be generated with something like:
php app/console assetic:dump --env=prod --no-debug
In dev mode, there is no static file generated which can be included. The asset_url contains an url which will call symfony controller which will in turn generate required js/css files on the fly. Aparently it is very easy to include the output of a controller in symfony:
{% render asset_url %}
To answer my own question, one could write a twig extension, which would include a static file or forward request to render method depending on wether it has been called in prod or dev mode.
I will update this page if/when I write an extension like this.
Another option is not to use dev mode of assetic and always generate static css/js files on the fly with:
php app/console assetic:watch
Then a simple include would work.
I wish there was an out of the box method in Symfony to get this common task done.

Include javascript dojo files via Twig in Symfony 2

I try to achieve a simple goal: add developped dojo classes in a symfony2 html page with Twig.
I had read a lot of documentation on assetic, and i found two types of method to include assets:
The first one with the asset() twig function. And the second one with the "javascripts" tag.
The assets function is used to include files which are stored in the web/ folder whereas javascripts tag load files which are stored in the resource folder of the current bundle.
My dojo classes files are stored in the resource folder of a bundle, so i tried to load them with a javascripts tag like this:
{% javascripts '#MyBundle/Resources/public/js/MyClass.js' output= 'js/myBundle/MyClass.js' %}
<script type='text/javascript' src='{{ asset_url }}'></script>
{% endjavascripts %}
And it work, my file is successfully included, unfortunately the name is not "MyClass.js" but "MyCmass_MyClass_1.js". I have executed the assetic:dump --env=prod command but my file name still "MyCmass_MyClass_1.js"
What can I do to correct this ?
(I tried to delete the cache, relaunch my server in prod/dev, launch the assetic command with the dev env, and no change).
Visit your site in production mode: yoursite.com/app.php instead of yoursite.com/app_dev.php, or point your webserver to correct file in web folder: web/app.php.

Linking assets in express js depending on environment

Is there a way of linking assets in my html files (to be precise: nunjucks files in my case) depending on the environment? I want to include several partial *.css or *.js files in the dev env in order to debug it easier and one concatanated *.min.css and *.min.js file in prod env (kind of like with assetic in Symfony).
You would probably need to do this via a build process. Good task runners include Grunt and Gulp.
You could use something like grunt-usemin. This would allow you to put direct script/link tags in your html, then run a grunt command to combine them.
It would vary based on your template system but the basics are like this:
In controller - make the env available to your template:
res.render("template", {
env: process.env.NODE_ENV || 'development'
});
Template:
{% if env === 'development' %}
<script>....</script>
<script>....</script>
{% else %}
<script src="prod.min.js"></script>
{% endif %}
In addition use the answer by #vernak2539 to build your minify your prod.min.js file using gulp or grunt and the minify/uglify/concat plugins or do it 'manually' using things like CodeKit.

Symfony2 Assetic not working with multiple javascript file with the * sign

I use Symfony2 and the assetic Bundle. (probleme when using the * sign to ask assetic to take all files)
Form what I have read here and there assetic allow to use multiple javascript file.
This work just fine when when I write all the file right before the <'/html> tag:
{% javascripts
'#MySiteBlogBundle/Resources/public/js/test1.js'
'#MySiteBlogBundle/Resources/public/js/test2.js'
'#MySiteBlogBundle/Resources/public/js/test3.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
but the same code, doesn't work if instead of listing the file, I use the * (just like this:)
{% javascripts
'#MySiteBlogBundle/Resources/public/js/*'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
with the *, it works only depending on the pages which are displayed. I did all my javascipt test on class which are on my main twig template. And thoses class are displayed on all pages... So all test should be working.
Anyone ever had such probleme when using this * sign with assetic?
Thanks for any comment/help.
I noticed only two problems with assetic earlier.
First, in production mode you have to dump them (php app/console assetic:dump --env=prod) before using. Okay, this is not a problem but you shouldn't forget it.
Second, if you use the * sign to load all JavaScripts then the order of your scripts will be alphabetical and this can break a few dependencies among script files. This is the reason I usually don't use the * sign.
After few hours with the same issue, I realized you need to:
create symbolic links (A.K.A. symlinks) or copy of your bundles by command:
bin/console assets:install
or
bin/console assets:install --symlink
in your definitions, use bundles/mysiteblog/js/* rather than #MySiteBlogBundle/Resources/public/js/* (you will see your bundle path in WEB directory after Step 1.

how install angular-xeditable in mean js

i've been tried to install angular-xeditable (http://vitalets.github.io/angular-xeditable/#) in meanjs (meanjs.org), but after download with bower, I can't reference the javascript files in layout.html. And that's supposed must be added automatically.
<!--Application JavaScript Files-->
{% for jsFile in jsFiles %}<script type="text/javascript" src="{{jsFile}}"></script>
{% endfor %}
So, anyone with the same problem?
The problem is assets reference.
Meanjs use config/env/all.js for assets configuration and those are injected in layout.server.view.html.
That's is the rigth way to include reference.

Categories

Resources