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
Related
Currently in my Grails app, I have all my CSS/JSS inside web-app/css and web-app/js respectively, and I refer to them in my GSPs like so:
<link rel="stylesheet" type="text/css" href="<g:resource dir="css" file="myapp.css" />">
<script src="<g:resource dir="js" file="myapp.js" />"></script>
I am trying to convert these over to use asset-pipeline.
So I added compile ":asset-pipeline:1.8.11" to my BuildConfig#plugins section, and then moved my CSS/JS files into their appropriate places in grails-app/assets. I leave the <g:resource> tags in place. When the server starts, my app is styled completely wrong, and it is obvious that Grails can't find my CSS/JS files in their new location.
What do I need to do to make this conversion complete & correct?
You can use the asset pipeline taglibs:
<asset:stylesheet src="myapp.css" />
<asset:javascript src="myapp.js" />
This will look in the grails-app/assets/stylesheets and javascripts to find your resource files.
If you would still rather grab the relative path, you need to use the asset pipeline methods to do so.
The Asset Pipeline can change the path when deployed:
For example, in the Development environment, none of the resources are minified and combined and the path is something like YOUR_APP/assets/myapp.js .
In the production environment the path would change to just YOUR_APP/assets/SOME_HASH_OF_YOUR_MINIFIED_ASSET
So to get Asset Pipeline to tell you the path use:
${asset.assetPath(src: 'myapp.js')}
${asset.assetPath(src: 'myapp.css')}
Letting Asset Pipeline compute the path allows greater flexibility when deploying. For example, if you host an application in the cloud, you could specify a specific CDN (like CloudFront from AWS) to serve your static assets with a simple config change in Config.groovy.
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?
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.
I have an issue with the mvc4 bundler not including a file with extension .min.js.
In my Scripts folder i have two files: bootstrap.js, bootstrap.min.js
In my BundleConfig class, I declare
#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
When running in Debug it renders as expected:
<script src="/Scripts/bootstrap.js"></script>
When running in Release it renders as:
<script src="/bundles/bootstrap?v=57XuMf8ytOYgVErEDhgFDRtQ5jlC48bryka4m2DVq_M1"></script>
Why doesn't it render as:
<script src="/Scripts/bootstrap.min.js"></script>
Why doesn't it render as: <script src="/Scripts/bootstrap.min.js"></script>
Because that's how bundling works in ASP.NET MVC 4. Don't worry, the contents of this /bundles/bootstrap?v=57XuMf8ytOYgVErEDhgFDRtQ5jlC48bryka4m2DVq_M1 is exactly the contents of the /Scripts/bootstrap.min.js. In this case the bundling mechanism hasn't minified the /Scripts/bootstrap.js file but used the already minified version.
The reason you want to use bundles.
Declare one statement but generates multiple import resources codes.
Minify your js or css code
Bundle mutiple files into one file which will reduce the browser
request number.
Bundle will give the request url a suffix which is generated based on
the files. So if you don't cache the page, there will be no js/css
cache problem, you don't need to clear browser cache.
By default, when you're in debug mode (you can modify your Web.config to set if enable DEBUG), the js/css files will not be bundled, so you can see the files seperately which will make it easier to debug.
When it's not debug enabled, the files will be bundled.
So if you already have .min.js files, you can import them directly in your page.
I have Less CSS working with my Django site in local development. Everything looks fine. I'm including the files as follows:
<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}less/base.less">
<script src="{{ STATIC_URL }}js/less-1.1.3.min.js" type="text/javascript"></script>
However, when I deploy the project to Heroku, Less CSS inexplicably doesn't work. What do I have wrong?
I know for a fact that I have static media set up properly: I can download base.less and less-1.1.3.min.js from the correct paths just fine.
Note: I realize that it's best to compile and minify my .less files for production, but this is just a staging server for development purposes.
Note 2: If you know how to add compilation of Less CSS to the Heroku deployment process, without having to install node.js, I'd be interested in learning how to do that in addition to my main question..
The problem is that less.js loads the .less stylesheets through XHR, which doesn't work unless you set the appropriate Access-Control-Allow-Origin header, which S3 doesn't permit (https://forums.aws.amazon.com/thread.jspa?threadID=34281).
As a workaround some people have suggested setting up an HTTP Proxy, which adds the necessary header. (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) and (http://zefer.posterous.com/pure-html-ajax-solutions-to-upload-files-to-s)
Otherwise, you're going to have to compile the .less files to CSS, as less.js isn't going to work.
Of course, another alternative (which I use), is to simply deploy the static files to an Apache server, and not host them in S3.
Take a look at https://github.com/nigma/heroku-django-cookbook
It makes use of the post_compile hook provided by heroku-buildpack-python to install nodejs and lessc.