I'm trying out Grunt and have a question about including javascript files in dev and later stages. For clarification: the minify, concatenation, etc is not the problem here - just the output/replacement.
In the dev stage I want to include javascript libraries and files individual - for debugging, maybe just because I did so all time and somehow I don't like them to be concatenated in dev. So in I want the following output in my HTML file when developing:
<script src="js/lib-1.js"></script>
<script src="js/lib-2.js"></script>
<script src="js/lib-3.js"></script>
...
And then for production or staging I would like to have grunt output:
<script src="js/all-files-in-one.js"></script>
How to achieve this the simplest way?
You might want to take a look at the grunt-usemin plugin (https://github.com/yeoman/grunt-usemin). Here's a simple example.
Basically, if I have some javascript files I want concatenated into a single file (or sets of javascript files that I want concatenated into single files per set), I can put the script tags that reference those files inside "build" blocks.
<!-- build:js assets/js/foobar.js -->
<script src="./assets/js/foo.js"></script>
<script src="./assets/js/bar.js"></script>
<!-- endbuild -->
<!-- build:js assets/js/bazbuz.js -->
<script src="./assets/js/baz.js"></script>
<script src="./assets/js/buz.js"></script>
<!-- endbuild -->
Now when I run a grunt build that includes the 'useminPrepare' and 'usemin' tasks, those script tags in my index.html will be replaced with this:
<script src="assets/js/foobar.js"></script>
<script src="assets/js/bazbuz.js"></script>
The example and docs explain how you can configure this and use it for other assets, like css.
Related
With node and browserify it's easy to manage js dependencies by just buttoning it all up into a bundle.js file and including that in the parent html.
What I'm wondering is how do you guys manage libs like bootstrap?
They download just fine to node_modules but how do you get them into your html files or asset folder?
Do you just reference them straight from node_modules? Have a task copy them in? Etc?
Caveat, I was hoping to do this without the browserify-css plugin because I want to keep my css and js separate.
I personally have a Gulp / Grunt workflow setup in which I included my js/css modules and then it automatically do all the important task and at the end I have only one css and js file. Then I import them to HTML.
I suggest you to make task for gulp or grunt which will check for changes in the folder that you decide ( where download of libraries will be ). If there is a change - it will automatically copy the .css files into another working directory.
I hope I understand what you want correctly.
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
I am creating a simple angular project in which I am using css of font-awesome.
In my index.html I added following line:
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
and before this i executed: bower install font-awesome --save
Now when i execute grunt serve the above line for importing css is automatically removed. How can I resolve this issue?
If you are using grunt-wiredep, which automatically injects the bower components into your index file then anything between
<!-- bower:css -->
<!-- endbower -->
and
<!-- bower:js -->
<!-- endbower -->
will be overwritten with each command.
Try putting your <link> tag out side of this.
Finally after lots of hit and trails got the solution. In bower.json under overrides we have to write following block of code, after that grunt serve won't remove that link from index.html
"font-awesome" : {
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss",
"css/font-awesome.css"
]
}
In app.html:
<body>
{{> index}}
</body>
<template name="index">
...
<script src="https://www.gstatic.com/swiffy/v5.2/runtime.js" type="text/javascript" />
<script src="animation.js" type="text/javascript" />
...
</template>
animation.js is inside /public along with all the html and jpeg's etc for a static site.
When I navigate to the app root, it all works right except that the Swiffy animation just doesn't show up. Perhaps something to do with Meteor not just serving JS from the /public directory? How can I fix this?
When I navigate to the very same code stored as /public/index.html, the animation shows up.
Note: Swiffy is just a way to automatically convert Flash animations into .JS that is run by the Swiffy runtime.
Client JS libraries should be placed in the client directory. This will make it available to meteor for inclusion into the minified app.
For more information see http://docs.meteor.com/#structuringyourapp
You can put your library to /client/compatibility directory. But you put there, all pages include your library. If you want some pages include your javascript you must use ext package. For example https://atmosphere.meteor.com/package/external-file-loader
I have config in project .properties
file.pages =dashboard/**/*.html
in dashboard/index.html i have
<!-- //-beg- concat_js -->
<script src="../js/plugins.js"></script>
<script src="../js/base64.js"></script>
<script src="../js/toastr.js"></script>
<script src="../js/jquery.h5validate.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="js/script.js"></script>
<!-- //-end- concat_js -->
But I am getting the build output as
<script src="js/c1212c4.js"></script>
but file is generated in
../js/c1212c4.js
You've got two separate script directories that don't have a child/parent relationship (js/vendor, for example). You can configure it to work that way by editing the build.xml, but we didn't design it to do so out of the box. It's basically because the regular expression that does the replace captures the directory based on the path to script.js in the source but other operations can be based on dir.js (which is what I'm assuming is happening here) or other operations (the concatenation, for example, just follows file system links to pull in the files to concatenate.) Basing the build script on a default h5bp install (one js directory with children), we're covered, but with this configuration it's not straightforward.
To solve your problem, pick one directory or edit the build.xml to point to your output directory.
I was wondering if anyone out there knew which js files from zurbs foundation requires Jquery. I am building my functions.php file in wordpress and I want to set the dependencies for the scripts if they have any, so that they are guaranteed to load after the Jquery file. Here is a list of the files
modernizer.js
foundation.js
app.js
Again which ones have dependancies on Jquery?
This question is a bit old, so the question wouldn't be exactly the same now:
modernizer.js doesn't require jQuery, I think foundation & app did, but zurb has significantly changed the javascript files, including made their own fork of modernizer (modernizr.foundation.js) - the current (foundation 2.2) "preferred" load order is:
<head>
<script src="js/modernizr.foundation.js"></script>
</head>
<body>
...
...
<!-- end of container/all content -->
<script src="js/jquery-1.7.2.js"></script>
<!-- all the jQuery dependent files begin with 'jquery.' and are separated so
you can remove what you don't use -->
<script src="js/jquery.reveal.js"></script>
<script src="js/jquery.orbit-1.4.0.js"></script>
<script src="js/jquery.customforms.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/jquery.tooltips.js"></script>
<!-- app.js is basic functions that you're supposed to edit -
it requires jQuery to start as well -->
<script src="js/app.js"></script>
</body>