We Keep Coding

Grunt source file relative path

Why must the leading slash be removed in the source file paths in order for Grunt to properly locate the files? The gruntfile is in the main project older along with the "includes" folder that contains the JS files.
module.exports = function(grunt) {
var SiteMasterHeaderArray = [
"/includes/js/knockout/knockout-3.4.0.js",
"/includes/js/common/common.js"
];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
dest: {
files: {
'dest/SiteMasterHeader.js': SiteMasterHeaderArray
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
The destination file isn't written because (at least it appears this way to me) that Grunt is searching some other location for these files due to the "/" in the file path. Remove the slash and the function works perfectly.

A leading / means it's an absolute path and it's looking for it, starting from the root directory. Without that, it's searching for a relative path from where Gruntfile.js is.
If you'd like paths to be relative to a different folder than Gruntfile, please see grunt.file.setBase or the --base cli option. More information here.

Grunt.js Unable to read file (Error code: EISDIR)

My folder structure is as follows
static/
js/
default/
main.js
lib/
someplugin.js
vendor/
jquery.js
tinyMce.js
Inside main.js I have the following code
#import '../lib/vendor/jquery.js';
#import '../lib/vendor/tinyMce.js';
#import '../lib/someplugin.js';
// ... more code ...
Every time I run grunt I'm getting the follwing error:
Warning: Unable to read "/PATH_TO_MY_APP/static/js/lib/vendor" file (Error code: EISDIR).
If I remove the tinyMce.js import line, grunt runs fine. So the problem must be with tinyMce, right? Wrong, if I cut all the content of tinyMce.js and paste it inside jquery.js (after jquery.js own content), grunt will run ok.
Here is my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
import: {
options: {},
default: {
expand: true,
cwd: 'static/js/default/',
src: '**/*.js',
dest: 'static/js/stage/default/',
ext: '.js',
}
}
});
grunt.loadNpmTasks('grunt-import');
grunt.registerTask('default', ['import']);
};
I've read the docs of the plugins I use, but I found no option that may help. :(

instead import all your files in the main.js
why you don't let grunt do this?
you can use concat and uglify for this:
see: Grunt concat all package.json dependencies
have you tried just use that cwd:
'static/**/*.js',
also can you share your gruntfile.js? so I can have a better look.
I hope that helped you.

How to read and parse gruntfile programatically so I can modify it and save again?

I am creating a complex Yeoman Generator and I need to read an existing gruntfile and modify it.
Any javascript way of parsing a gruntfile is enought.
Any help will be appreciated.

imo i dont think you can achieve that by parsing js files and generating a new gruntfile.
instead of doing that you can try creating template files ex. .jade (or another template engine) so , you can produce the final gruntfile, you can look into grunt configuration object grunt.config and eventually read information, interpolate data into your template(s) and produce the final gruntfile.js.

Here's a modular approach to grunt that you can use without having to modify gruntfile.js every time you add new tasks, plugin or custom.
Add load-grunt-tasks npm module as a dev dependency: npm install load-grunt-tasks --save-dev. This plugin allows you to load all your grunt dependencies using one line of code.
Specify a folder in your project to hold all your modular configuration files. This example uses the path grunt/configs/. Each json file's name should match the it's property name in the grunt config. For example, the config for grunt-copy-config should be grunt/configs/copy.json
Copy the gruntfile.js I've posted as a public gist (stack overflow wasn't formatting the code properly). This gruntfile will automatically load your plugins and compile a config object using the project's package.json file and every .json file found in grunt/configs/. The gruntfile also loads any custom tasks I've saved into grunt/tasks/
As an alternate option - you can host your modular config objects in JavaScript files instead of json files (that's what I do). This provides me with the capability to dynamically compile my config objects if I need to. If that's something that interests you, I can share that code as well.

Thank you guys for the tips, great ideas, with your guidance I came up using a json file for each configuration:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: grunt.file.readJSON('browserify.json'),
uglify: grunt.file.readJSON('uglify.json'),
sass: grunt.file.readJSON('sass.json'),
cssmin: grunt.file.readJSON('cssmin.json'),
});
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['browserify', 'sass']);
grunt.registerTask('production', ['browserify', 'sass', 'uglify', 'cssmin']);
};
Now I can easily modify the configuration

Grunt + require.js config for a simple website

I have the following simple structure for my website:
src
js
core.js
main.js
lib
jquery-1.8.2.js
require-2.1.1.js
require-text.js
templates
1.html
2.html
index.html
build
I want all js+lib files to be compiled into one build/js/main.js file and other files just to be copied to build folder. How to write grunt.js config for this task? It seems I should use grunt-contrib-require..
The second question is how to compile 1.html and 2.html (I use require text! plugin) into one line for each and include theese lines to build/js/main.js? This case there should be only two files into build folder - index.html and main.js.

Take a look at grunt-contrib-requirejs and see if it is helpful to you.

The Grunt Website offers a very good tutorial to get you started, this is what you will need:
grunt-contrib-concat - To put files together in one
grunt-contrib-copy - To copy files to your "build" folder
grunt-usemin - To use the compiled js file in your html
I am not sure how to put those html files together though, feels weird to do that but maybe you can find a plugin for it.

Your Gruntfile.js should reside at the root of the directory i.e ls should show src/ build/ Gruntfile.js
Contents of `Gruntfile.js specific for your requirements:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
src: [
'src/js/*', 'src/lib/*'
],
dest: 'build/js/combined.js'
}
},
uglify: {
js: {
files: {
'build/js/main.js': ['build/js/combined.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat:js', 'uglify:js']);
};
I don't think require-js to be used here. Require-js is helpful when you need to load your js scripts in a specific order. If that being the case add the below code in your Gruntfile.js just below pkg: grunt.file.readJSON('package.json'), line
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
name: "path/to/almond", // assumes a production build using almond
out: "path/to/optimized.js"
}
}
}

You might consider adding grunt-require to the list that luschn put together. It uses r.js, has lots of options, and is pretty darn nice.

Running tasks configured across multiple grunt.js files

I have a node app that includes multiple unpublished modules. My app's package.json includes a few git dependencies:
"module-a": "git+ssh://git#github.com:me/module-a.git",
"module-b": "git+ssh://git#github.com:me/module-b.git"
and each of those have their own grunt config. Eg in node_modules/module-a/grunt.js:
module.exports = function(grunt) {
grunt.initConfig({
lint: {
files: ['server/**/*.js', 'test/**/*.js']
},
jshint: {
options: require('./lint-ci')
}
});
grunt.registerTask('default', 'lint');
};
(they also run tests, etc, but I'm keeping it simple here)
Is there a built-in way to do this with grunt? Note that I want to keep the dependent grunt.js files for convenience when I've only changed something within that dependency.
The only solutions I have found are
build up my main grunt.js programmatically (eg, iterating over my dependencies in package.json to build the lint and test config)
call grunt multiple times using --config node_modules/module-a/grunt.js
Neither seems ideal. Is there a better way?

Just a thought but have you looked at grunt-hub?
https://github.com/shama/grunt-hub