Minify directories containing CSS and JS recursively with Yui Compressor - javascript

I have JS and CSS files scattered around many directories and sub-directories. I just want to specify the top project folder, inside which all these lay, then the entire folders tree should be rebuilt and the minified files placed in their corresponding folder.
For example:
my_project/assets/js/test.js
my_project/css/style.css
my_project/jquery.js
should be minified and placed like this:
minified/assets/js/test.js
minified/css/style.css
minified/jquery.js
Is it possible with Yui Compressor to do that? I don't see such options. Is it possible to do it with batch? I know how to get the files but not how to rebuilt the right destionation.

Related

How to concat JS library files using gulp?

Please check out my gist:
https://gist.github.com/flyspaceage/9e88716294df93c8eaece51fe413f7a3
All of my files seem to concat properly except the JS libraries. Im using JS Socials, JS Scrollify, Headroom, JQuery 2.1.1, JS Slick. The files concat into one minified file, but the libraries no longer work in production. I am writing my first Gulpfile, any suggestions focused on Gulp appreciated.
Place your vendor libraries in a different location. The reason why its not working is you are cleaning the dist directory, where the source files are present.
Move all the scripts present in this directory to a folder 'vendor'
libs: ['dist/scripts/libs/jquery.headroom.js', 'dist/scripts/libs/headroom.js', 'dist/scripts/libs/jssocials.js', 'dist/scripts/libs/slick.min.js', 'dist/scripts/libs/jquery.scrollify.js'],
then change the folder path to vendor
libs: ['vendor/scripts/libs/jquery.headroom.js', 'vendor/scripts/libs/headroom.js', etc..,,,],

Why does r.js combine and minify JS, then copy all the files to output dir?

I've been working with the RequireJS optimizer to create multiple optimized JS files for my project and have come across a problem that I’ve found mentioned in other posts but have not found a solution for.
When using r.js to optimized a single file, it pulls all the JS dependency into single file and drops it into the file specified by the “out” property in the build file. However, when trying to create two optimized files (i.e. multipage project using the ‘modules’ property), r.js creates two nicely optimized files but then drops ALL folders and files from the appDir into the output directory. That is, it pulls together and minifies all JS dependencies but then copies the individual files into the output directory.
I realize that r.js is not intended to be a deployment tool so is this by design or is there a way to tell r.js to not copy dependent files and directories into the output directory.
Yes, in your r.js build file, set the removeCombined option to true in order to preserve only the modules you specified to the output location.
{
...
//If set to true, any files that were combined into a build bundle will be
//removed from the output folder.
removeCombined: true,
...
}
See the r.js documentation's example build file.

How to manage CSS and JS files structure in web application (Custom vs plugins)?

I searched over the internet but I could not find an answer to my question. I am just trying to figure out a clean way to structure my CSS and JS files inside my project. Let us say for example I have a CSS folder and I have a custom my.css file and also I have a Scripts folder and I have inside it a myscript.js. I understand that my.css will go in the CSS folder and myscript.js will go under the Scripts folder in this folder setup :
root
css
my.css
Scripts
myscript.js
My question is, if I want to use a jQuery plugin like jstree for example. This library require me to add one js and one css file. Should I keep these files under the Scripts and CSS folder ?
Plan A
root
css
my.css
jstree.css
Scripts
myscript.js
jstree.js
Or should I separate them into a different folder for cleaner structure like this
PLan B
root
css
jstreeFolder ---> jstree.css
my.css
Scripts
jstreFolder ---> jstree.js
myscript.js
Is this structure acceptable? Any standard ways for achieving this ?
Any help is appreciated.
Root
-- styles
|-- your_file.css
-- scripts
|-- your_file.js
-- libs (or plugins)
|-- jquery
|-- jquery-ui
...
I think this structure will be nicer and all the third party libraries (no matter css or javascript libs) that you've chosen should be located under libs directory. It will make maintenance be easier and clear.
For mainentance reasons i prefer another approach. The library jstreee organise the javascript files, css-files and images in a certain way.
/libs/
/jstree/ // <-- folder
/themes/ <-- folder
/default/ <-- folder
style.css
32px.png
jstree.js
jstree.search.js
/other-plugin/
I put everything under libs and in a folder with the name of the library. This way the external dependency of a library is clear and the internal path structure (css files may point to images) of the external library is untouched.

HTML5Boilerplate js structure

I'm wondering if someone can check my understanding of what the intended purpose of HTML5Boilerplate js directories. I understand that main.js is where I'm expected to place all site specific javascript that I author. Plugins.js is where I would place all jQuery plugins used. Both main.js and plugins.js will be concatenated and minified by the build process. Vendor.js holds javascript libraries. This directory will be minified (unless it is already minified) but not concatenated.
If this is true, then my question is where should something like cute slider which has a modular structure be placed? I'm thinking I want it to be minified and concatenated so it shouldn't go in the vendor directory. I don't believe I can add cuteslider's javascript to main.js or plugins.js without destroying it's modular structure. Should I create a new directory, and call it something like apps, to hold cuteslider code and then modify the build code to minified and concatenated it?
Here is a snippet of cuteslider's code structure
cute
cute.2d.module.js
cute.canvas.module.js
cute.css3d.module.js
cute.gallery.plugin.js
cute.slider.js
cute.transitions.all.js
First you have to consider cuteslider as a plugin.
Add the required files to make the plugin working (cute.slider.js, cute.transitions.all.js and respond.min.js) in the plugins.js.
Then add the js to load the slider into your page in the main.js as
$(document).ready(function() {
// code here to load cuteslider
});
The modular look have to be set only in the main.js file.

jQuery UI setup

I just downloaded jQuery UI but when I downloaded it it came with a bunch of different files & I'm confused if I need to use them all & where I need to put them.
I have:
css/
development-bundle/
js/
index.html
I copied the folder inside the "css" dir & put it in my local css folder.. this seemed to contain the CSS & images for the theme I downloaded with it. I then copied the "jquery-ui-1.8.12.custom.min.js" file from the "js" dir & put it inside my local js dir; however now I'm wondering do I need to copy stuff from the "development-bundle" folder & if so what?
It contains..
demos
docs/
external/
themes/
ui/
misc text files
jquery-1.5.1.js
Only stuff that looks like I might need is from the "external" dir which has a few js files in there & maybe the "themes" dir.... but I thought this was already covered previously? Also..... the files inside the "ui" directory appear to be all the related js files to what I selected for my custom bundle download + another "jquery-ui-1.8.12.custom.js" file.
You only need the js and css folders in order to use jQueryUI. The development folder is used more for demos and trying things out. It has each plugin in a separate file to allow you to pick and choose features. So, just use the js and css folders and import the files in there to your HTML.

Categories

Resources