HTML/CSS/JS build tool - javascript

I have a project which consist of a lot of static HTML and js files. I need a build tool that can concatenate and minify them.
I saw this great screencast that explains how to do it with ant and YUI. The only thing I'm missing is after the minified version is created , how can i replace references to the JS/CSS files in the HTML, so it will reference the new minified version?
Is there a better/easier tool for this (not GPL/LGPL license)?

Grunt is pretty good, and supports most of those things. This plugin will re-write your CSS link tags, though normally (and for JS) you'd just write the link/script tags to point straight to the minified version anyway, and continually have it build your files.

You can try minify JS and CSS. Minify JS can make 1 JS file merging multiple JS file and same for CSS.

Related

How to minify selected styles?

I've been using Sublime for more than 2 years, but now I've come to know the minification of CSS and JavaScript files as well. So I'm using Minify plugin, but this plugin only work in a separate .css .js file. But one might have styles in style tag as well. So how should I minify these styles?
Currently I'm using minifier.org do this.
This should not depend on your IDE but on your build system.

Minifiying CSS/Javascript with Java/Scala

I've the need to generate some css / javascript at Runtime on my project. After generating this code ( probably with PHP) i need to get the string, minify them and then save the minified file.
I was searching for a tool to do that in Java/Scala, but all the tools i found are for minifying the project files, not plugin to do that on specific files as needed.
I looked at wro4j since it seems it could work that way, but couldn't find how to do that inside the java code and not at build time.
how to do that inside the java code and not at build time
I would recommend the following approach:
Generate the JavaScript and CSS files, unminified
Minify the files using an external tool like yuicompressor
If you don't want to generate the files first, yuicompressor offers a node.js version that can minify JavaScript strings directly. I'm not sure if that would work on CSS strings also.
Given the relative complexity of running node.js within Java, you might want to write a small node.js tcp server that you can send the JavaScript/CSS strings and return them minified. This approach also promises some nice scalability properties in terms of throughput.

Gulp/Grunt folder Structure and Practices for PHP Projects

I'm learning Gulp and I'm wondering how to use it in a typical project
I have a Laravel project with a public folder that has a /js folder that holds all my javascript files..
Now for the live server I would like to minify them, I have gulp-minify working but how do you arrange the folder structure? Any idea's on a good practice to do this?
Method 1: Concat all javascript files into one
So the idea is to concat all the javascript files into 1 javascript file and include that.
My question here is: I have a lot of page-specific javascript, Like my homepage has a slider which relies on a certain div with an ID, But on other pages that element isn't there, so the elements necessary to make the javascript work aren't there, and the code isn't needed for that page?
On Topic
http://ryankent.ca/starting-a-new-project-with-laravel-5-gulp-bower-and-bootstrap/
I'm very interested in your ideas!
You should do sth more than minifing files. You can merg all js files using concat.
It's usually better to load single file instead of 10 small files.
My recomendation is to minify and concat all files from js and put in level up - just in your public.
There are a few different approaches.
One is to have separate /src (for the source files) and /build (for the minified files) folders inside your /js folder. Another approach is to append .min to the minified files and keep them alongside your source files. A potential downside of these approaches is that you will have to update all references to your JavaScript files in your templates.
Lukasz's approach is probably the one I'd recommend, since it requires the least work. Ultimately, it's up to you and your personal preference.
For page specific javascript you can use gulp-htmlmin: it's born for html minification but it can also minimize your inline javascript calling uglify under the hood.

Can i combine many js javascript files in one file

I am using jquery fileupload plugin and it has 7-8 js files which it loads.
Now others developers are also working on site and sometime it cause confusion and difficult to find which js file is used where.
So i am thinking if i can combine 7 files in one file so that i can know that thats my file
Try this to compile your javascript file or code.
http://closure-compiler.appspot.com
While possibly overkill in this particular case, it might be worth checking out grunt. It will let you keep your files divided into multiple files for when you are working on them, and as soon as any file change compiling, minifying and combining them into a single/groups of files as desired, while also allowing you to define the load order of your code.
It requires some setup the first time you run it (which you can later use as a template) but greatly improves the process of combining/minifying files, and also has support for processing coffescript and sass among others, as well as writing unit tests for your code.
I use Rake to compile Javascript (and SASS to CSS, as well). It minifies the files in a unique JS. It's written in Ruby, but it's easy to configure and it works very fine.
But if more developers are working on the same code, another good idea I strongly suggest is to to use a SVN (sub-version control system), as TortoiseSVN or Git. This will allow many developers to work on the same source files, without losing any change.

Dreamweaver Minify Plugin

Is anybody aware of a plugin that can be used with Dreamweaver or any other coding utility that can minify your javascript/css as you upload the files?
So for instance, I create a file called functions-global.js, and then, when I upload the file, it uploads this file as it is and creates a minified duplicate called something like functions-global.minified.js?
I cannot imagine it would be a very hard plugin to write, as long as you have the minifying algorithm which is used here for js - Compress Javascript, and this one for CSS - Compress CSS
I use dreamweaver purely for familiarity purposes, if there is any other software out there that does this then please let me know.
Thanks in advance
This is a dreamweaver extension for minifying js:
http://www.dwbooster.com/miscellaneous/javascript-minify

Categories

Resources