Develop Reference

Javascript code automated minification

I want to minify my existing javascript code and I want to achieve something like what we do for css preprocessors. We write in scss file and it gets converted into .css file on its own when the scss file is saved. Similary I want to achieve if I write in js file and save it ,the code gets minified and gets saved in minified file on its own.
Is there any way to achieve this kind of functionality ?

If you are using Atom, you need this package:
Atom Minify: https://atom.io/packages/atom-minify
If you are using Sublime, you need this package:
Minify on Save: https://packagecontrol.io/packages/Minify%20on%20Save
Both packages can minify on save!

Javascript project structure for dev and production using npm and grunt

I am trying to structure javascript files in a project. I have used NPM to manage the modules and planning to use Grunt to concatenate and compress the js and css files for deployment.
I am currently using the following structure
-[project root]
-- [node modules] :packages such as requirejs, jquery, semantic-ui etc using npm
--[war]
---[Dev]
----[css] multiple css files from modules (Question 2:?)
----[js] multiple js files from modeuls (Question 2:?)
- Gruntfile.js :for concatenate and compress
---[Production] -
----[css]:This is where the compressed and concatenated css files are kept
----[js] :This is where the compressed and concatenated js files are kept
Question 1: Is the above approach to structure the project correct ? Any other recommendations which allows to manage the packages, dev and production files.
Question 2: Can NPM or another tool allows me to pick up the js and css files from the [node modules] folder and place them to (dev>>css or dev>>js) folder ? If am doing this manually how do I track the versions ? Seems like I am missing something here, there must be a better solution.
Suggestions/recommendations/comments are much appreciated.
Thanks

The question is a bit too wide for SO format, but in general your structure is good. Instead of copying files from node_modules, you have your own JavaScript files under js and you import/require them to your own files.
//foo.js
//ES6 style imports
import {Foo as Bar} from "biz";
//Common JS style requires
var Bar = require("biz");
//AMD style requires
require(["biz"], function (Bar) {
If you want to use your node_modules in a browser, you'll want to bundle them using Browserify, Webpack, Rollup or similar. To automate this, you can easily use Grunt tasks such as grunt-browserify together with grunt-watch.
Same applies for your CSS files: You store your own files under css and if you need CSS files from node_modules you can import them to your own files: if you are using some preprocessor (such as SASS or LESS), the preprocessors usually inline your imports when building the .css-file. If you are just using plain .css files, see grunt-css-import for example.

Missing something trying to get bootstrap included into meteor as a local git submodule

I'm trying to install a local copy of bootstrap into a meteor project to make it easier to customise it.
I was using the bootsrap-3 smart package and it was working pretty well, so removed that, created the directory tree and files described in Use Twitter Bootstrap 3 RC1 with Meteor and executed meteor add bootstrap which displayed the text from the summary string, but, no bootstrap is included in the project.
I added bootstrap with
git submodule add git://github.com/twitter/bootstrap.git public/bootstrap
and adjusted the paths appropriately in the packages/bootstrap/package.js file (even tried absolute paths to try and get it to work).
package.js looks like
Package.describe({
summary: "Load locale bootstrap scripts"
});
Package.on_use(function(api) {
api.add_files('../../public/bootstrap/dist/js/bootstrap.min.js', 'client');
});
I'm missing something, but struggling to find it.
Peter

You could stick to the standard way of creating packages by just putting Bootstrap 3's css, fonts, and js directories at the top-level of your package directory, and link to them like this in package.js:
api.add_files('css/bootstrap.css', 'client');
api.add_files('js/bootstrap.min.js', 'client');
...
If you care about the icons, add the fonts the same way. Then, create an override css file which loads last, overriding the paths to the icons in the Bootstrap css. An example of this override file is in Meteor's official Bootstrap 2 package, here. Also see the package.js file from the same, here (though I think you could skip using NPM to concatenate the path names).

One easy way to add bootstrap is just to place the files in your client directory, probably at client/lib. That is the simplest way if you are going to maintain and customise the files yourself. You will probably want both the .css and .js from bootstrap.
For a package, I would look at bootstrap3-less. It can be added with meteorite and gives you the less files which you can customise. If that doesn't suit you then you can at least see how the package.js there looks and how the package is organised.

using requirejs optimizer to minify to a single javascript and single css

I am writing jQuery plugin and using requirejs in order to make my plugin modular and easier to code.
The plugin has also its own css files. Now, I want to combine and minify all the js files and css files. I am using r.js to so it. Here is the build.js configuration file that knows how to concatenate and minify js files into one file:
({
baseUrl: 'js/plugin',
optimize: 'none', // none, uglify or uglify2
wrap: true,
name: '../vendor/almond',
include: 'main',
out: '../dist/jquery.my-plugin.min.js'
})
How can I add an option to minify also css file? I saw the cssIn option, but where do I tells r.js wha is the output name? Do I need to use modules? If so, how?

r.js automatically inlines contents of #import url(...) links in all .css files found in the project directory (thus concatenating multiple files into one master stylesheet).
In your current build configuration, however, with only baseUrl specified, r.js doesn't even know about the CSS folder (which is, presumably, somewhere in ../../style/ relative to js/plugin/).
You'd have to add the appDir and dir properties to your buildconfig file (both explained in detail in the example config file) and set project root (ie. appDir) to directory that contains both JS and CSS folders.
Please note that, as mentioned in the documentation, adding appDir will require changing value of baseUrl to be relative to appDir.

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.