I really get big trouble with incremental build (for develop process, in production build, I minified and concatenated files to some files).
My project (angular) have hundreds js file and It's cost me up to 2 minutes to load web page. Root cause: too many requests to get files (> 1000 files).
I have an idea to deal with this problem:
Concatenate all third-party librarys to one file (same as gulp-angular way).
Concatenate (concatenate only, not minify) js files in the same folder to one js file. only build all file in folder when one file which lie in that folder changed (using gulp-cache and gulp-remember).
Do you have any suggestion for me? Try browserify or webpack?
to add to your approach you can incorporate minification which reduces the concatenated file. this further improves performance.
I have a Phonegap project that contains a lot of html-files, javascript files, css-files and images.
When I build the app I want to keep it as small as possible, so I want to exclude all files that are NOT used in the html-files. For example some images in the 'img' directory might not be used in the app.
Somehow I need to make a build-script that searches in every html and css file for other files that are included. Of course the problem is that in each file url's can be relative or absolute.
Is this something that can be automated (maybe with ant?) , or does everybody always pick all necessary files by hand for deployment?
You can use grunt.js
In one word: automation. The less work you have to do when performing
repetitive tasks like minification, compilation, unit testing,
linting, etc, the easier your job becomes.
Basically you can minify and merge all your css in one file as well as all js in one file. At the same time you can exclude files for build process. You can google for example code. I. E.
https://coderwall.com/p/e0jxea or https://github.com/centralway/grunt-phonegap-build (phonegap project grunt based)
I am a front-end guy using Windows for design and html/js/css coding. My work is separate from the back-end guy using .NET. I am also new to Haml/Sass thing as well as Ruby. And definitely not using Rails. After few search, I decided to pick Sublime Text 2 for Sass/Haml support and get rid of my old Notepad++. My first question is:
1. What is the best practice / efficiency to automatically convert whole folder of Haml (primary) and/or Sass to static documents (html/css)?
I have a separate solution for Sass by setting the "watch". I was searching for Haml automatic conversion solution and found few options:
Library for making static websites with HAML/SASS/CSS framework
2. Should I use StaticMatic?
Google search said it is the best. But there seems no update for 2 years
https://github.com/staticmatic/staticmatic
There is also this site (Is it the same?): http://staticmatic.rubyforge.org/how_to_use.html
If I use StaticMatic, I can setup a build system in Sublime Text to run from the Build Menu (http://docs.sublimetext.info/en/latest/file_processing/build_systems.html)
3. OR should I go with all-in-one solution like this (may cost few bucks)? Is there free one?
http://fireapp.handlino.com/
I don't mind to have Sass -watch running separately and another polling mechanism for Haml. I just want to make sure I have the "latest" out there.
Hope to get some advise for my unique situation. Thanks.
The answer is Middleman
http://middlemanapp.com/
It's the replacement for out-dated StaticMatic
HAML:
For automatic conversion from haml to sass you can use this gist: https://gist.github.com/3898955. If you want to automate even more the workflow process, you can use https://github.com/alexnj/SublimeOnSaveBuild sublime package to run the command on file save.
SASS:
For SASS here is the needed setup. https://gist.github.com/3899112.
For automatic conversion on save, the same rules are applied here too, but it's important to include the .sass and .haml extension in SublimeOnSaveBuild.sublime-settings file.
So your file should look like this:
{
"filename_filter": "\\.(css|js|sass|less|scss|jade|haml)$",
"build_on_save": 1
}
You can extend this list at your own wish.
I have two html files, I used 2 different frameworks to create 2 different web application for smart phones and other devices such as tablets.
now I have to use Velocity Macro, and merge this two html files into a single vm, that generates 2 outputs depending on a configuration.
i have been searching for methods to do this and I found this: http://www.roseindia.net/apachevelocity/macro-wrap-html.shtml
My question is do I need to build a Java fie just like in the link and then make a vm file, or can I just make a single vm file without making any java files?
if my question in unclear let me know I try to explain more.
The Java class shown there is just to demonstrate the template, and all the template does is demonstrate how to use the Velocity #macro directive.
IMO putting both HTML files into a single VM template is a bad idea, because it will be large and difficult to understand, modify, and debug. Instead, consider using the #parse or #include directives.
Alternatively, consider a mechanism at a higher level to serve the appropriate pages directly instead of pushing the template decision-making process into the templates themselves--this is arguably the best solution.
Is it possible to reuse HTML tags across multiple files, headers and footers for example? Placing them in separate files adds an extra HTTP request, that I'd like to avoid.
I don't want to replicate minor changes in headers and footers across every html file every time a change request comes along.
HTML is not a programming language - it's a markup language. You don't do object-oriented HTML because it isn't object based. This is the whole purpose of a server-side language, so you can make include files and use them in your server-side application.
If you have Apache however, you can use server-side includes which don't require a programming language such as PHP, but it's less flexible:
<!--#include virtual="/footer.html" -->
First, HTML isn't even a programming language, so it's impossible to have "Object-oriented" HTML.
Placing them in separate files adds an
extra HTTP request, that I'd like to
avoid.
If this is the reason for your "without server side code" requirement, then you are mistaken - the client does not fetch the templates that make up a page separately; the server side code will return a single HTML page to the client.
If, on the other hand, you don't have the option to run any server-side code at all and have to make do with static HTML pages, then there's only two options I can think of: iframes (which do result in separate HTTP requests, of course), or some sort of tool that basically runs the equivalent of server-side code to embed your reused templates everywhere and spits out the result to be uploaded to the server. You can have this effect by running a PHP/Apache-with-SSI/JSP/Whatever server on your development machine and using wget to make a static snapshot of the pages.
What I want to do is this. The files can be scattered during development. But I when I'm ready to release, a toolkit should compile the included files into a single html file.
You can use a template language/engine, such as jinja2.
You can layout files in a certain hierarchy, and have templates inherit from other templates, and include other templates, and define reusable macros (closest thing to what you referred to as "reusable tags").
What I want to do is this. The files can be scattered during development. But I when I'm ready to release, a toolkit should compile the included files into a single html file
I know this is late, but CodeKit's .kit language lets you do exactly what you were saying.
http://incident57.com/codekit/help.php
I think the language you've chosen in your question (object oriented HTML) is actually masking the real issue you have here...
What I want to do is this. The files can be scattered during development. But I when I'm ready to release, a toolkit should compile the included files into a single html file.
This sounds like a job for a preprocessor, I don't believe it has anything to do with your webserver or server side technology, as this is a step which would happen before deployment.
There's a number of text pre-processors available eg M4 - hell you could even use the C compiler pre-processor if you wanted. A quick google reveals that there are specialised pre-processors for HTML as well....
Automatic file inclusion, automatic escaping, and whatnot that can be done with automatically inserted headers and footers, chosen based on path patterns.
Seems to fit the bill?
Sure . But these would have to be separate ajax calls form the client . There are lot of javascript mvc frameworks like that do that .
If you want to have include files during development, then compile them into free-standing HTML files, you could do that by spidering your development server with wget: whatever server-side technology you use will combine the files and return the HTML, which wget will saves as one file.
As everithing is object over the technology but not directly, indirectly interacting with the object that are created at different level as per security implementation.
You can do this.
I just released a mature framework called Hypertag that is, in fact, Object Oriented HTML. It is entirely client-side, in continuous development, and allows for very interesting, yet HTML-compatible, advanced solutions for logic and layout.
See http://hypertag.io for more.