I am using web yeoman.
In my applications index.html file I have this script includes.
I would like to know what these <!-- build:js ... --> mean and from which tool they originate?
I would also be grateful about any source link.
My problem is that I plan a very modularized angularjs app and I do not want to manually add 200 .js files to this index.html file.
Maybe this can be configured that during compiling those script entries can be copied over with a clever algo depending on my app folder structure...
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/factory1.js"></script>
<!-- endbuild -->
The build blocks are from grunt-usemin. It will not automatically scan and add files from a directory.
You can use a task like grunt-include-source to prep the HTML with the files from your scripts directory tree and then run usemin to concat and uglify them.
The grunt-include-source github page (linked in the last paragraph) contains examples of Gruntfile configurations to update the HTML. Your main challenge will be the src to dest juggle as the HTML is updated by multiple tasks. In the scope of things, compared to dealing with 200+ files, that should still be easier. The downside, of course, is that if you have any orphan files in your list of 200+...they will still get included and sent.
You can also see these StackOverflow questions where similar questions have been asked:
can grunt automatically include all my js in index.html?
How to include scripts automatically in a yeoman/grunt project?
Related
I am trying to use a single HTML stylesheet that I've created between multiple apps script web app projects. I have the HTML stylesheet hosted on an external site but cannot figure out the code to include that external stylesheet into my apps script projects.
I've currently got it working with the following code in my Index.html file:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= include('stylesheet') ?>
The include function calls:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
And my stylesheet is a separate HTML file in my Apps Script.
This all works well, but I'd like to have a central repository elsewhere (I've read that I cannot link to an Apps Script file in another project) for my stylesheet so that whatever changes I make will update to all of my Apps Script projects automatically.
To do this, I've uploaded my stylesheet.html to a website and have taken the link that points to the file (i.e. http://www.test.com/stylesheet.html) and tried to do the following without success:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
I've placed this in the head element of my Index.html file, and I also tried it above the head element. Neither worked.
I've also tried to just use the include function that worked as mentioned above and modify my stylesheet.html to be blank except for:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
None of this seems to work, wondering if anyone else has any thoughts on how this might be possible.
Host CSS file in Google Drive
Create a .css stylesheet file and host it on Google Drive.
Change the uploaded file permissions to publish it on the Web.
Now copy the published file ID and use it to build the following URL:
https://drive.google.com/uc?export=view&id=FILE-ID-GOES-HERE
Now include the generated URL to your HTML page using the <link/> tag in this way:
<link rel="stylesheet" href="google_drive_link_goes_here">
Reference
Host CSS or JS file on Google Drive
I'm reading through the below link to try and figure out Assetic:
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
It sounds very good but I'm trying to understand how it works and I can't find any information about how it would handle duplicate third party sources across different bundles. For example, if different bundles which all called the bootstrap js/css scripts as below - would the final consolidated file have multiple copies of each?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
Assetic doesn't manage CSS/JS files that are loaded remotely, it only manages the CSS/JS files that you store locally in your project. So there won't be any consolidation on those. You wouldn't want that consolidation anyway because those 3rd-party files on CDNs will be cached on a user's device and load from that cache without having to download every time.
How should one use grunt-processhtml in the development environment?
For example, in index.html, I'll do something like load partials for angular when this is built:
<!-- build:include:dist views/template-main.html -->
<script type="text/ng-template" id="views/template-main.html"> -->
</script>
<!-- /build -->
But I only want that to happen in the built environment, not the environment the development environment (app/) that's served by grunt serve?
Or, for a more common example,
<!-- #if NODE_ENV='production' -->
<script src=" production script "></script>
<!-- #endif -->
<!-- #if NODE_ENV='dev' -->
<script src=" sandbox script "></script>
<!-- #endif -->
How do I get only the sandbox script to be served in the development environment (app/) served by grunt serve
Should I be performing a grunt build every time and instead of grunt/node serving the contents of app/, somehow change it to serve a development build (i.e. dist/)
Or should I be writing these grint-processhtml directives (or any pre-processor) in another file, e.g. pre.index.html and have it built to index.html?
Otherwise, if grunt-processhtml is run, it removes the directives, if it's not, the browser obviously ignores the grunt-processhtml directives and loads both scripts.
(This is for a AngularJS project scaffolded by Yeoman, but is a general grunt-processhtml question)
I think I misunderstood how to use grunt.
I suspect it would be best to add different build targets, e.g. dev, production, etc, and not just use app/ and dist.
This involves setting up different built targets, setting different targets to be served.
A good explanation: Have Grunt generate index.html for different setups
I thought that when I moved .js files within a directory that grunt-usemin would update the .js files listed within the <!-- build:js({.tmp,app}) scripts/scripts.js --> blocks, but that doesn't seem to be the case.
I'm using the default Yeoman setup and haven't made any changes to the Gruntfile.js
I've tried grunt clean, but it seems to be only looking at the /dist folder.
The grunt-usemin configuration only specifies where to find HTML files that should be scanned for <!-- build:... --> blocks. Usemin does not track the javascript (or css) files you want concatenated and uglified.
The .tmp folder is used for files that are in-flight to the distribution location.
If you are moving files around, you also need to edit the build:js blocks accordingly or look at the second link, below:
can grunt automatically include all my js in index.html? - does not apply to usemin but is background for the next link
How to include scripts automatically in a yeoman/grunt project? - a little extra work, but if you can define a pattern/glob for your scripts you can use this answer to generate the build.js block content before usemin kicks in and does its work.
What is “{.tmp,app} ” in Yeoman generator?
grunt-usemin docs - GitHub docs, not the greatest, but the more you use and configure the plugin the more it makes sense.
Maybe the solution of my problem is contained in the question, but basically
I'm new to ExtJs 4 MVC and am having some difficulty where to place my JSPs.
I'm using Spring MVC using the Request Mapping annotation.
I'm having relative path problems with ExtJs App.JS finding my controller.
I usually put my JSPs under WEB-INF/views and my ExtJs 4 App is in WebContent/app.
I am trying to set up the example as shown on:
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
and in the example the index.html is contained in the app package.
So I have a view called WEB-INF/views/sample-view.jsp and this includes the app.js script, which works fine.
My app has a controller like the example, and this is the problem, because it seems to try to find that internally in ExtJs using the appFolder, and controllers.
This resource can't be found, because my view is in another package all together. Does this make sense ?
Should I just move my view out of WEB-INF ? And if so will Spring MVC complain?
Thanks,
Lisa
For the first attempt at getting this running it is easiest to use all static files just to keep things simple. Once the app is running from static html and js files, migration can then be made to use the spring mvc and jsp pages.
To start be sure there is a folder named resources under the webapp folder, assuming webapp is the parent of your existing WEB-INF folder.
The basic starting folder structure for using a static html page will be:
webapp
- resources
-- app
-- css
--- ext-all.css
-- sass
-- themes
- WEB-INF
-- spring
-- classes
-- views
index.html
app.js
ext-all-debug.js
In WEB-INF there is likely a spring folder with an mvc-config.xml file or similar. In that config file the resources folder needs to be designated for serving static content by using the resources tag. Likely, the first mvc:annotation-driven tag is alrleady in the config file as in this snipped below. Add the resources tag noted below into the config file.
<!-- Configures support for #Controllers -->
<mvc:annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />
With this in place the resources folder can serve the index.html file much like setup of the Sencha example.
All of this is setting you up to be able to build the first example from a url like:
http://localhost:8080/resources/index.html
When downloaded and extracted, the Ext JS zip, contains a resources folder. Copy the subfolders of that folder into the webapp/resources folder. Also copy ext-all.debug.js to the webapp/resources folder.
Then create index.html in webapp/resources with this content similar to the Sencha tutorial:
<html>
<head>
<title>Static Account Manager</title>
<link rel="stylesheet" type="text/css" href="./css/ext-all.css">
<script type="text/javascript" src="./ext-all-debug.js"></script>
<script type="text/javascript" src="./app.js"></script>
</head>
<body></body>
</html>
Create app.js in the webapp/resources folder as the following snippet and enough is in place to be up and running with the single panel configured in app.js. From this point the tutorial is easy enough to port over to this setup.
Ext.application({
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
After that static html file is running correctly, a jsp can be used from the view folder and will have content like this:
<html>
<head>
<title>JSP Account Manager</title>
<link rel="stylesheet" type="text/css" href="./resoures/css/ext-all.css">
<script type="text/javascript" src="./resoures/ext-all-debug.js"></script>
<script type="text/javascript" src="./resoures/app.js"></script>
</head>
<body></body>
</html>
a bit off topic, but if you are going to use Spring MVC might as well use Grails - you will save yourself a lot of typing and figuring out bunches of config files.