RequireJs minifcation - complex directory structure - javascript

we have a problem at work, we are using require js but our folder structure is a bit different,
we have the following:
--js folder
--Folder
---some base js files
-Folder
---main
--src
---require.js
--- require JS modules
--plugin js files
--more js files
We would like to minify all these JS files to a SINGLe js file for production as such
---js folder
--min-all.js
Is this possible?
if so how? ..
Any help would be appreciated!
Thanks!
I just thought I would clarify that the other Folders contain standard non modular javascript files, they can be a mix of plugins or simple javascript helpers.

The short answer is: yes, RequireJS can do this.
Basically, you will need to create one JS file that requires all of the resources that you want minified. Then you will point the optimizer at that file and it will mash them all together.
require(["one", "../another/two", "folder/three", "folder/inner/four" ... ]);
If that file was called myfile.js, you would run the optimizer with similar parameters to this:
node r.js -o name=myfile out=optimized.js
If you have libraries or other files that you do not want included into the final optimized file, you would use the excludeShallow flag. e.g.
node r.js -o name=myfile out=optimized.js excludeShallow=jquery.min
There are more options so you should check out their optimization documentation if you haven't yet.

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..,,,],

Naming pattern for TypeScript compiled Javascript files

We recently created a Repository for a TypeScript project. We try to .ignore all generated files to keep our repository and build processes clean.
Currently our TypeScript files someFile.ts are compiled to JavaScript files someFile.js. We would like to ignore all compiled files. However, there are javascript files which we would like to track in our repository. This makes it impossible to simply ignore all src/**/*.js files.
Is there a way to add a prefix or postfix or other naming adjustment to the compiled javascript files as a compileOption? Something like file.compiled.js?
From the docs: http://www.typescriptlang.org/docs/handbook/compiler-options.html
You could use --listEmittedFiles and save the list of compiled files to .gitignore

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.

Gulp: running through all dependencies without duplicating?

gulp.task("compile-vendor-js", function() {
return gulp.src("./bower_components/*/*.js")
.pipe(concat("vendor.js"))
.pipe(gulp.dest("./build"))
});
This gulp task will compile bower solved dependencies.
The problem is, it will consider all JS files, including the minified ones, making my build file have duplicated code.
I know that one solution for this is having a variable array containing all file paths, but this isn't good.
try something like:
gulp.src(["./bower_components/*/*.js", "!./bower_components/*/*.min.js"])
where you can find a common denominator between all the minified js files (eg, .min.js)
I think that a blacklist of files is going to be shorter than a whitelist in this case.
Also, you might consider looking into the main-bower-files project, which will read your bower.json file and pull out the main js files from each project for you.

How to optimize project with Require.js to produce only ONE Javascript file?

I managed to use require.js and it's optimizer to optimize my project. But it generates 3 javascript files:
1. main file
The require.js config file (the one referenced in html as data-main )
2. require.js library
The code for require.js.
3. My application code
Is it possible to merge these 3 javascript files into one single file?
Take a look at the grunt js project, with specific to :
grunt concat
and the plugin for require js:
https://github.com/asciidisco/grunt-requirejs

Categories

Resources