I need to:
Copy index.html to index.uncompressed.html
Change some the references in index.html from .js to .min.js (i.e. my_jsfile.js to my_jsfile.min.js)
3) Minify index.html
I am using Grunt.
Number 3 is no problem.
I assume number 1 will be easy.
For number 2, I was planning on using some sort of Grunt editing plugin and changing all .js file references between <!-- Start Here --> and <!-- End here --> from my_jsfile.js to my_jsfile.min.js.
Is this the way this type of thing is done?
The resource I use in this situation is grunt-processhtml, which will do exactly what you're looking for. Check out one of my repos, steady-backbone-boilerplate, where I use this to do exactly what you're describing.
In particular, I find this is a helpful example:
<!-- build:[src] js/source.min.js -->
<script data-main="js/main" src="js/vendor/require.js"></script>
<!-- /build -->
So, in development we're using the requirejs script to load all our dependencies. In our production index.html file, we're loading the source js file, which has been minified with the grunt-requirejs module.
Related
I'm searching for days now for a proper way to serve the static content for my Laravel 4 website in a most optimal speed performance way. What I tend to obtain is serving only the needed JS and CSS, already minified to each requested page.
Example:
page1.html
-> styles.css - for this page it includes bootstrap.css, jquery-ui, selectize.css, google-custom-maps.css
-> scripts.js - for this page it includes boostrap.js, jquery.js, selectize.ks, google-custom-maps.js
page2.html
-> styles.css - for this page it includes only bootstrap.css
-> scripts.js - for this page it includes boostrap.js
Currently I have all my plugins installed with bower and using gulp tasks I managed to minify all the less, css and js scripts at once, the only problem is I don't know If it is possible to serve only the needed files for a custom page.
In my opinion an optimal solution would be that in each view.blade.php file i provide all the needed assests using
{{ asset('front/css/bootstrap.css') }}
{{ asset('front/css/jquery.css') }}
{{ asset('front/css/selectize.css') }}
And at first run this is compiled and cached. Is there any package that can do that?
I have been always using template system where I include all the needed files in one place and other blade.php files extend this template.
I'm currently working on a large angular.js project. I use grunt to concat/uglify all of my files into one large target.js file, which I then include on my index page.
I've come to the realization that this makes it quite difficult to debug in the dev environment since the code is then all on one line and super ugly. I thought about setting up a second grunt task that leaves the files pretty and separate (see this answer: Alternate grunt.js tasks for dev/prod environments) but then I have the problem of having to include all of the files on the index page when in dev, but removing those references and referencing just the ugly concat target in production.
I'm hoping to find a solution that allows me to keep pretty code in dev and ugly concat code in prod using grunt. I considered just adding script tags on the fly when in dev, and then somehow removing them when I use the production task, but this seems like a headache that might not be necessary, as well as I don't know how I would determine what script tags need to be removed/replaced.
I'm not 100% sold on this approach, as I'm just beginning the project and want to get this right the first time, so if you have a suggestion that better handles this situation, I would be open to accepting that answer as well.
A solution is to use the grunt-usemin and grunt-contrib-concat . That way you can define a block of ressources (css / js) that will be concatenated only when you execute the usemin task.
For example :
index.html :
<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
Gruntfile.js :
// simple build task
grunt.registerTask('build', [
'useminPrepare',
'concat:generated',
'usemin'
]);
That way, files will be concatenated only at build time, leave your index.html will all the single references untouched in DEV mode
For more details / example, see : https://github.com/yeoman/grunt-usemin
I am trying to compile the bootstrap less file using less js and trying to save the compiled css file to my server root folder.
I am little bit confused about which bootstrap less files to be included out of 40 less files.
Currently I am including following files to get the bootstrap css:
bootstrap.less
variables.less
For changing the variables values and compiling, I am doing following:
HTML:
<body>
<div class="bg-primary"style="width:100%;height:100px"></div>
<a class="btn btn-primary" onclick="generatecss();"> compile </a>
</body>
JS:
function generatecss() {
less.modifyVars({
'#brand-primary': '#5cb85c'
});
}
After executing above js function the less is compiled properly changing the brand-primary color. But my problem is that how should I save this newly compiled file to my server root directory.
LESS is not typically compiled from the browser, but rather from the command-line with lessc. After it's installed (likely using NPM), you should be able to compile Bootstrap with something like
% lessc bootstrap/less/bootstrap.less my-bootstrap.css
Then you only need to distribute the resulting my-bootstrap.css—no need to serve the LESS sources.
If you want to modify that variable as you did with the JavaScript code, you can either edit Bootstrap's variables.less or pass another command-line option:
% lessc --modify-var='brand-primary=#5cb85c' bootstrap/less/bootstrap.less my-bootstrap.css
lessc can take other options as well—try lessc --help to view them.
In my index file, I have something like this:
<!-- build:js({.tmp,app}) scripts/main.js -->
<script src="scripts/foo.js"></script>
<script src="scripts/bar.js"></script>
<!-- endbuild -->
Which then outputs to my dist like this:
<script src="scripts/cce9cd3a.main.js"></script>
What I'm trying to do is modify the way the dist is rendered so it says something like:
<script src="https://s3.amazonaws.com/etc/etc/static/scripts/cce9cd3a.main.js"></script>
The idea is I want it to output to the dist folder in the same way, which I will move over to s3. What is a clean way to prepend all of my static assets to the same static serve url using grunt?
Based upon the discussion we had in comments, you have two general options after grunt-usemin does it's work.
1) Find-and-replace from the shell.
If you are using a *nix system with grep and similar tools, you can put the file someplace easy to grep and replace. For example, you could change your build blocks to something like:
<!-- build:js({.tmp,app}) awsreplacepath/main.js -->
<script src="scripts/foo.js"></script>
<script src="scripts/bar.js"></script>
<!-- endbuild -->
so you get something like:
<script src="awsreplacepath/cce9cd3a.main.js"></script>
Then use a grep-and-replace shell script, like the one discussed in these questions to replace the awsreplacepath with the path to want referenced.
How to grep and replace
How to find and replace all occurrences of a string recursively in a directory tree?
2) Find-and-replace before grunt finishes.
There are a few find-and-replace plugins for grunt, but grunt-string-replace seems to have the most usage according to npmjs.org.
This isn't really much different than the first option.
In both cases, the regex should be simple as you can pick a string that is essentially certain to be unique...so you won't need to do much more than drop something like 'awsreplacepath' into the regex.
...and just remember that the main.js file usemin generated and that you need to move will still be in the awsreplacepath directory. All we're doing is changing the HTML to prevent you from having to edit the file yourself.
I would create a CoreBundle, and use this for your template layout, base template, etc.. and do your includes there.
Furthermore if you leave it in the app/Resources making a new directory for Public/css to my knowledge it wont get pulled down when you install/dump your assets to the /Web directory. So if by chance you happen to be only using those files on your live production server, and or like to use that directory as your normal include path, then it just makes more sense.
Also, for me, i use less, and the less files arent compiling and shipping the compiled version into the /web folder either.
If you make a core bundle, you can have all this natively, and have your files in an area that your more likely to be used to getting into with your file editors.
It also helps separate custom files away from the core framework better.
As a sidenote, i did like fsehat's suggestion, however i was a bit disappointed when the assets werent being handled properly. also i dont like using ../ in include paths, ./ is ok, but not ../
if you put them in a bundle (/Your/Bundle/Public/css), after compiling, you can just call them from your templates like this for e.g. <link href="{{ asset('/css/loader.css') }}" rel="stylesheet" media="screen">
Possible dublicate of Symfony 2 - Working with assets.
For example, You need to store your styles in src/YourBundle/Resources/public/css
Use next command for assets CSS
php app/console assets:install web
Styles will be copy to web/bundles/YourBundle/css dir. And now you can asset them easy in templates
Put your css js in web folder like directory
C:\wamp\www\yourProject\web\bundles\acmedemo\css\
And use it using
<link rel="stylesheet" href="{{ asset('bundles/acmedemo/css/mystyle.css') }}" type="text/css" />
Sure, You will share your javascripts and stylesheets between your bundles, you need to visit following URL and follow the step:
With Assetic / Twig / Symfony2, can I define front end libraries?
Symfony2: How to share js libs and css between bundles