I am quite new with GruntJS and I wonder if it is possible to have a task that loads some RequireJs modules to process them and write the result within a JS file.
I describe my scenario:
I have a RequireJs based project with many files.
I would like to concatenate/minify/etc the project to deploy it and increase performances, etc.
The optimization works perfectly with the grunt-contrib-requirejs plugin.
The grunt-contrib-requirejs plugin works with a main.js file and I should need to generate it dynamically.
I would like to generate the main.js processing some RequireJS module of the project (call them fileA.js and fileB.js).
I would like to use the generated main.js to run the grunt-contrib-requirejs plugin.
So the task sequence would be something like:
Custom Task:
loads fileA.js and fileB.js
merge them together
write the result of the merging within a new JS file
grunt-contrib-requirejs task:
use the generated main.js file to optimize the project
Do you know how can I achieve this?
I don't have any kind of restrictions on the way/tools/libs to use.
You can load RequireJS in Grunt, as follows:
var requirejs = require('requirejs');
You can then fetch all the fileX.js files in your tree through Grunt:
grunt.file.recurse('js/modules/', function callback(abspath, rootdir, subdir, filename) {
if (filename === 'fileX.js') {
/* Do something here. */
}
}
Once you have all the modules you need you can use r.js to minify/concatenate them.
Related
I'm trying to add a simple JS script to the server side of Meteor. Everywhere I read I'm told I should create an atmosphere package for the script-but that seems like a pretty round about way of doing it.
I am presently creating a local package to extend a feature on the app I'm using, and would like to use the script on the server side. Is there a way to simply REQUIRE a js file in meteor?
You can simple create server folder and add a js file to it.
Or you can use everywhere
if (Meteor.isServer)
{
//some servercode
}
more info about project structure http://meteortips.com/tutorial/structure-application/
The simple way to REQUIRE a js file in meteor is to put in the lib folder.
If it's required only by the front-end, then place it in the client lib folder (myproject/clinet/lib/requiredJSfile.js), if it's required by only the server, then place it in the server lib folder (myproject/server/lib/requiredJSfile.js).
If it will be used by both, put it in the root lib folder (myproject/lib/requiredJSfile.js).
You should do this, because the meteor rendering engine places the files from the lib folder on top of the inclusion list, meaning that when your actual meteor code runs it will be already available.
Check out this boilerplate for an example: https://github.com/matteodem/meteor-boilerplate
As a new user of Meteor it's not super clear here that, when creating a function to be included server-side you write it differently in Meteor.
Traditional .js function declaration would look something like:
function serverFoo(param1) {
console.log("serverFoo() param1="+param1);
return "bar";
}
The way to declare this function in Meteor:
Create a file "server/inc/server-globals.js".
var serverFoo = function(param1) {
console.log("serverFoo() param1="+param1);
return "bar";
}
GruntJS's documentation is pretty thrifty. There's a small section on creating a task, and one on creating a plugin.
If I want to create a new thing (rather than using an existing thing like jslint) then am I creating a task or a plugin?
A plugin is just a convention for creating reusable tasks and publishing them to npm. If you don't need to publish them to npm then you can do the same with
grunt.registerTask('alphabetize', 'description', function(arr) {
/// ...
});
You would write a task whether you create it in the gruntfile.js or encapsulate it in a plugin. In a plugin it would just encapsulate that task
module.exports(function(grunt) {
grunt.registerTask('alphabetize', 'description' function(arr) {
// ...
});
});
Think of a plugin as just another Gruntfile.js that's located in a different folder with it's own package.json. It does the same thing as the Gruntfile.js but in a more reusable way.
I'm trying to leverage GruntJS to create a build process that is uniform across multiple teams and projects at my company. The idea hear is that we have a config file for each application that only specifies the files that need to be processed and what bundles they need to be concatenated into at the end. The build process would be the same for all apps: pick up the config for the app, process files in each bundle using a uniform build process.
For Example:
asset.json config file specifies two bundles, "main" with 1.js + 2.js and "secondary" with 2.js and 3.js
Build process says for each bundle, preprocess, minify, then concatenate into a js file based on the bundle
Get output of "main.js" and "secondary.js"
The problem I'm running into is that Grunt takes a "static" configuration and executes it. I've already abstracted out the building of the configuration so that I can add chunks dynamically, but right now I don't see a better way forward than literally looping over each bundle and building out a unique task for each section of the build process for each bundle, building up queues of tasks to execute, and then running each task in the queues during the build process. Its definitely possible, but its a lot of manual work and seems prone to breaking. Is there way to just execute each task in order as I loop over the bundles? Any better way to achieve the same net result of config + source in, N bundles out?
I want to be clear that I am fully aware that Grunt CAN build multiple files. What I'm trying to do is separate the specification of how many bundles from the build steps themselves. Grunt core has to bake these two things together which means each project would have to go in and alter their build steps rather than an external configuration. As per the example above, I should be able to swap out the asset.json file specified in step 1 for any config file that has 1, 2, 3, ... N bundles with N files in each one (and potentially specifying a "type" like scripts or styles).
Edit 10/12/13: The Nitty Gritty posted an article yesterday that might be another approach to tackling your issue.
This can be done by passing the module name you want to build as a command line argument and loading in the whole assets file in your grunt config. Please note this is example code, I have not tested this, so it's possible you need to set paths etc. correct for your case.
Start with updating the assets.json file to a plain JavaScript file, and reform it like so:
module.exports = {
main: ["1.js", "2.js"],
secondary: ["2.js","3.js"]
}
Next, you can pass a command line argument to Grunt, which should specify one of the module names in assets.js. Example:
grunt --bundle=main
Now, you'll need to load in the assets.js file in the Gruntfile:
var assets = require('./assets'); // assuming assets.js is on the same level as your Gruntfile
And then you can get the argument name by using:
var bundle = grunt.option("bundle");
Now you can use bundle as your output file name and assets.bundle to get the array files for that bundle.
I am new to gruntJS. Looking at the tutorials/presentations, I believe it is awesome.
Currently, we are using batch scripts in our web + embedded project, which performs the following tasks:
Merges all the JS file into one.
Merges all the CSS file into one.
Kills existing .EXE on which our project runs. It's basically a simulator's EXE which loads and runs our website. Our website is packaged in the form of ZIP file.
Deletes existing ZIP file.
Creates a new ZIP file which will contain some folders like "html", "lsp" (Lua Server Pages), images, JS(which will contain only one merged file), CSS(which will contain only one CSS file).
Start the .EXE. Basically the EXE once loaded which pick up the zip file from a specified directory.
I understand, merging process can be achieved via gruntJS, but I am not sure about starting/killing the EXE. It would be great if somebody gives me pointers how to get started. Once being certain about the process, I can convince my boss.
Thanks for reading.
Having a grunt-like script that launch your server isn't good practice. In an ideal world, you would separate the build and package phase from the launch of the server.
But anyway, there are either grunt plugins to do that, or the vanilla child_process of node, assuming you use node to run grunt.
Using grunt-exec it would look like this:
exec: {
start_server: {
command: 'program.exe'
}
}
Using the vanilla approach:
var spawn = require('child_process').spawn;
prog = spawn('program.exe');
prog.on('close', function (returnCode) {
console.log('program.exe terminated with code', returnCode);
});
I have my JavaScript organized as described here: https://stackoverflow.com/a/10816983/83897.
I have a JavaScript-heavy ASP.NET application that has multiple different pages (vs. being a single-page application). Each page has different dependencies, so I have a per-page .js file (page1.js, page2.js, etc.). Each has a require() call, declaring its dependencies:
require(['jquery', 'page1Module'], function($, module){
// page1 specific stuff here
});
This works fine. What I'm wondering is, how might the RequireJS build process work? I think I want a per-page "build" .js file (e.g. page1-build.js, page2-build.js, etc.)? Is there existing software I can leverage?
The process might look like this:
Compile all dependencies for a given script into one build.js file in a temporary directory.
Calculate an MD5 fingerprint for the compiled file.
Compare that fingerprint with the comparable file in public/assets.
Create an in-memory RequireJS manifest, mapping each module to the compiled file. Append this manifest to the compiled file.
Somehow make production use the build file.
EDIT: After some thought, I'm thinking the RequireJS optimization using node + r.js will just be part of a larger asset building process, where the asset building relies on some other, third-party library. The RequireJS optimization will simply be used for certain JavaScript dependencies (i.e. the JavaScript files for each page, including found dependencies), perhaps specified in some XML config.
You can create multiple optimized files by specifing the modules in the build profile:
{
modules: [
{
name: "main"
},
{
name: "page1",
include: ["dep1", "shim2"],
exclude: ["main"]
}]
}
Each entry will generate a optmized .js file.
More info here: How to use RequireJS build profile + r.js in a multi-page project