Most of my HTML, JavaScript and CSS files are written with a lot of spaces and comments that just add to the bulk. To keep editing simple, I prefer to have them this way, however, it's not so good on my website. Is there an easy way to minify these files before uploading to my server, or perhaps use cPanel to minify them?
It sounds like you're looking for grunt.js ( http://gruntjs.com/ ), or something similar, like gulp.js.
They're just task-runners, build-automaters, etc. I know grunt already has modules available that do minification/concatenation/other space saving things, and you can probably make your own module to FTP them to your server.
You could also achieve the functionality you're looking for by just writing a simple BASH script.
Related
I'm just getting into preprocessors, and I'm beginning with haml. I've got the basics down, and have yet to put this to any practical use. I'm not great with the command line, but at the very least, I've managed to convert my index.haml file to a readable html file.
My question is twofold.
1) Do I need to individually convert EACH file within my site directory i.e index.haml | service.haml | contact.haml etc or am I able to bulk convert the entire directory?
2) My second question relates to CMS's such as Wordpress. Am I able to use preprocessors with platforms such as this? If so, how would that work?
Apologies if these questions sound basic and/or stupid, but gotta start somewhere!
Thanks, Scott
1) NO, you don't need to convert each file to HAML. your server serves back HTML back to the client. If it's just plain HTML, it just serves without pre-processing through HAML engine. If it's haml, it pre-processes to generate HTML which will be finally served to the client.
2) CMS's such as WordPress support plain HTML by default, maybe some plugins might allow you to use HAML. you can always use conversion tools like htmltohaml to convert HAML templates to HTML if you want skip plugins.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm building my own blog and I would have lots of articles, so, copying and pasting the head every time, or an aside, the footer or some repeated parts of the blog would be stupid.
So, I'm looking a way to do it in an easy way. I heared about templating (but don't know what it is) and found this answer: Is it possible to create a web site header without copying and pasting it on every page? but it seems that is not what I'm looking for.
I heared about HAML and Markdown (HTML Preprocessors) and don't know if they are used to do what I need.
The solution I want to find is something like #import in Sass.
I have an #import "head.scss"; and in the compiled file I hadn't repeated manualy the (in this case an "imported module" head.scss)
I might say I'm learning to develop my static blog with Jekyll, just because I want to learn to use this technology, and second I know how to use WordPress, Joomla and learning a new thing would be interesting for me but I don't want to learn PHP so I think a templating language will be easier for this project
If you want to use Jekyll, you can use includes to avoid repeating code.
If You are looking easier ways for managing posts and front matter You should look into Jekyll Bash UI or Octopress.
If You want to learn more about Jekyll and its templating system, I'd recommend You to read the Jeyll.tips web page. It contains well formatted and easy to read how-tos, and also covers advanced topics like data files and collections.
Jekyll Bash UI (requires Bash)
Creating a new post is quite easy process, just this on the command line:
jcli.sh new
Octopress
Octopress uses rake utility which makes using Jekyll easier.
For creating a post You just have to call this:
rake new_post["My new post with Octopress"].
After this You can call rake generate to generate the page or rake preview to run the webserver at localhost on port 4000, so You can preview the changes.
The answer is yes it's possible.
In order for a scss file to work you have to make sure the .scss file (or sass file) is converted to css first. (you can look up the many sass tutorials online. for that, just look for converting sass or scss files into css there are even little simple applications for that like scout) By the way, with less you can do the same thing for css files as with sass in terms of importing.
For html files there are templating engines like you said. You can compare popular ones like moustache, dust.js and handlebars just to name a few.
With these you can import snippets of html code inside your file (so you do not have to repeat code).
In programming languages like JavaScript and php you can also do the same thing.
in PHP you can use for example the include() or require() function to import other bits of code from other files into your current file. And in languages like JavaScript you can even use something like angular for example to create simple custom directives to achieve the same goal.
Pretty much every server side language I've worked with has shared views in some manner or another.
asp.net webforms has master pages, asp.net mvc has shared views, coldfusion has cfinclude, RoR has partials, PHP has shared layout. I don't know about straight up HTML, but when utilizing a server side language this is definitely possible.
I would suggest using a content management system, like WordPress (https://wordpress.com/) , Joomla (http://www.joomla.org/), or Drupal (https://www.drupal.org/). You create a template one time and load it into the CMS. You can then create as many pages as you need without having copy and paste the template. You can also add in different elements as needed. This makes managing a blog much easier.
If you dead set on doing it one page at a time, I would suggest using PHP to pull in the header. Here is a good article to get you started, Creating a PHP header/footer . However, you'll still need to copy and paste a template file to create a new page.
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 was wondering what programming/markup languages does Diveintohtml5.info use. I am planning to create an online book(on some math stuff) similar to that of Mark Pilgrims' but need to know what exactly he used to create them.
Did he use a CMS like wordpress? Or it's just plain old HTML and CSS?
I am a bit new to the world of web development. Be kind.
Thanks in advance
Looking at the book’s source code on GitHub, it seems to be mostly static HTML, CSS, and JavaScript. However, it uses Python, Java, and shell code too, as you can see in the Makefile. (Makefiles are run with make.)
The Makefile contains a lot of shell code doing things like substitution, file copying, and concatenation. It also calls the Python and Java code, which is all in the util folder. The Python and Java programs compress the HTML and CSS, build the table of contents from the headings in each file, and do a few other things.
I have searched but could not find anything similar to what I need. I am looking for a tool that is capable of removing leading/trailing spaces in my HTML files which also have embedded JavaScript. Basically in the end, I plan to use this tool within my Nant scripts to perform this task on the fly with every deployment.
Is there already a tool that can do this, or maybe the best scripting language?
Basically, I will like what MS Word does for text using "justify (Ctrl+J)", to be done for my HTML files.
Here is the solution I found for this.
Using the html compressor command line tool, I was able to only remove the leading spaces of the html file where as fully minifying them didnt work.
Soultion:
java -jar htmlcompressor.jar --preserve-comments --preserve-multi-spaces --preserve-line-breaks --output D:\html\foo-leading_spaces.htm D:\html\foo.htm
Using this tool to generate my desired results, I am able to apply this to my build scripts to perform this process on the fly.
Thanks everyone for their input and hope this helps others in the similar situation.