I'm using RequireJS with a server generated file that contains translation strintgs and is reachable at http://hostname/i18n.js. I have added it to RequireJS with the paths config like so:
requirejs.config({
paths: {
'i18n': '/i18n'
},
});
Now I'm trying to minify this with grunt-contrib-requirejs' like this:
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), // the package file to use
jsDir: '<%= baseDir %>/static/js',
requirejs: {
compile: {
options: {
mainConfigFile: "<%= jsDir %>/common.js",
dir: '/tmp/www-release',
modules : [
{
name: 'common',
exclude: ['i18n'],
include: [
/* some filess */
]
}
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
};
As you can see, I have excluded i18n. Yet I still get the following error when running grunt requirejs:
Running "requirejs:compile" (requirejs) task
[Error: Error: ENOENT, no such file or directory '/i18n.js'
at Object.fs.openSync (fs.js:427:18)
]
How do I tell grunt to ignore the translation strings?
Related
Unlike all of the other node projects i've written, this one needs the node server's folder to not be root. Here's the current folder hierarchy:
- Root/
- build/
- css/
- im/
- js/
- nodeserver/ <-- gruntfile and package are here
GruntFile.js, package.json, and server.js are all located in nodeserver/
Here is my GruntFile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
files: {
'../build/all.min.js':['../js/config.js']
},
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
report: true
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
When I run grunt, it can't find the file that I'm specifying. This is the response:
Running "uglify:files" (uglify) task
------------------------------------
Verifying property uglify.files exists in config...OK
File: [no files]
Options: banner="/*! demo-webservice 2014-03-28 */\n", footer="", compress={"warnings":false}, mangle={}, beautify=false, report
Why can't it see my js file?
Wrapping files: {} in my_target: {} solved my problem.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
my_target: {
files: {
'../build/all.min.js':['../js/config.js']
}
},
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
report: true
}
}
});
^--- the new version of that initConfig.
It should also be noted that my_target could be anything, and is used by default since it is the only uglify profile supplied. If i had supplied more than one profile, i.e. "test: {}, prod: {}, etc: {}", then I would refer to them after the task in the following way: uglify:test, uglify:prod, uglify:etc
I'm new to using gruntjs and nodejs. I wanted to know how can I setup the gruntfile so that it watches both the sass files and the js files compiles using watch.
This is what I have so far:
module.exports = function ( grunt ) {
"use strict";
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
config: 'config.rb',
watch: true
}
}
}
});
grunt.registerTask('default', []);
};
Any help will be much appreciated. Thank you!
Try grunt-contrib-watch with grunt-contrib-sass. They're both Grunt plugins specifically for this kind of thing:
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/global.css': 'scss/screen.scss'
}
}
},
watch: {
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
},
The watch plugin configuration above will watch for changes in any .scss files, and will run the sass tasked (also defined above). You can even hook into livereload this way. You can also have multiple watches (the above only defines a css watch); creating a second watch to minify JS would be easy with grunt-contrib-uglify
I have an example you can look at that also concatenates JavaScript and does some minification with grunt-contrib-uglify. Here is the example.
I have the following directory structure (relevant bits only):
app
- build
- script.js
- js
- lib
- require.js
- jquery-1.10.2.js
- app.js
- index.html
Gruntfile.js
Gruntfile.js contains the following:
module.exports = function (grunt) {
var gruntConfig = {
pkg: grunt.file.readJSON('package.json'),
requirejs: {
compile: {
options: {
name: 'app',
baseUrl: 'app/assets/js',
out: 'app/assets/build/script.js',
include: ['lib/require'],
uglify: {
// beautify: true,
defines: {
DEBUG: ['name', 'false']
}
},
paths: {
jquery: "lib/jquery-1.10.2"
}
}
}
},
};
grunt.initConfig(gruntConfig);
grunt.loadNpmTasks('grunt-contrib-requirejs');
};
app.js contains the following:
require(['jquery'], function ($) {
// Do stuff
});
How do I set it up so that it copies all the JavaScript needed into build/script.js, not just app.js and require.js when I tell it to (erroring when I try to use jQuery)? I also want to be able to add modules without adding them to my Gruntfile, just by adding them to script.js.
You can have a mainConfigFile defined and inside config file have paths to you lib code like this
Contents of gruntfile:
requirejs: {
compile: {
options: {
baseUrl: "app/js/",
mainConfigFile: app/config.js",
out: "build/script.js",
name: "config"
}
}
}
Contents of config file:
require.config({
paths: {
lib: "<path to>/js/lib",
jquery: "<path to>/js/lib/jquery-1.10.2.min",
.
and particular file required
.
}
Requirejs will add the contents of all path files to the optimized code.
Try adding this to your options object:
findNestedDependencies: true
This way grunt-contrib-requirejs (actually just requirejs) will find whatever dependencies are listed on your config file.
Hope it works for you.
I followed the instructions on the grunt.option page to create different configurations for different environments/targets such as development, staging, and production in my Gruntfile. However, upon doing so I found that my tasks silently fail.
I've reduced the problem to a very simple example. The following Gruntfile fails to build the file:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dev: {
options: {
compress: true
},
build: {
src: ['src/css/test.less'],
dest: 'build/css/test.css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less:dev']);
};
The output in my terminal is the following:
$ grunt
Running "less:dev" (less) task
Done, without errors.
If, however, I use the following Gruntfile, the build output is as expected:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
options: {
compress: true
},
build: {
src: ['src/css/test.less'],
dest: 'build/css/test.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less']);
};
The terminal output for this Gruntfile reflects the built file:
$ grunt
Running "less:build" (less) task
File build/css/test.css created.
Done, without errors.
What am I doing wrong in the first Gruntfile? What is it that I am missing about this task:target convention?
Your first Gruntfile - If you want per-target options, you need to specify the files object. So your code would be something like this:
less: {
dev: {
files: {
"build/css/test.css": "src/css/test.less"
}
},
production: {
options: {
compress: true
},
files: {
"build/css/test.css": "src/css/test.less"
}
},
}
Basically in your first Gruntfile build is an unknown object. Your target is named dev and grunt-contrib-less doesn't have an option called build so Grunt doesn't know where to write the files. Your second Gruntfile works because you set the options as a global. Use the above code if you want per-target options.
When running grunt, I get the following error:
Warning: Unable to write "client/dist/js/build.js" file (Error code: undefined). Use --force to continue.
The config of uglify in my Gruntfile.js :
uglify: {
build: {
src: ['client/src/js/*.js'],
dest:['client/dist/js/build.js']
}
}
I'm using grunt-contrib-uglify.
Any ideas why this is happening?
Assuming your Grunt Version is 0.4.0, AFAIK you are not using the most recent Syntax (See https://github.com/gruntjs/grunt-contrib-uglify#usage-examples).
Try
uglify: {
build: {
files: {
'client/dist/js/build.js': ['client/src/js/*.js']
}
}
}
I am also not sure if the wildcards are handled properly.
I know this is marked as solved, but I still prefer this answer from a similar question because you can easily use the files again for an other command without writing them twice.
In short, answer says
//Does not work
src: ['client/src/js/*.js'],
dest: ['client/dist/js/build.js']
//Works
src: ['client/src/js/*.js'],
dest: 'client/dist/js/build.js'
Tested working example without writing files twice:
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
build: {
src: ['client/src/js/*.js'],
dest: 'client/dist/js/build.js'
}
},
watch: {
js: {
files: '<%= uglify.build.src %>',
tasks: ['uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'uglify',
]);
grunt.registerTask('dev', [
'watch'
]);
};
Notice that '<%= uglify.build.src %>' is very handy ;)
Execution
$ grunt watch
Running "watch" task
Waiting...OK
>> File "client/src/js/hello.js" changed.
Running "uglify:build" (uglify) task
File "client/dist/js/build.js" created.
Uncompressed size: 15 bytes.
Compressed size: 32 bytes gzipped (15 bytes minified).
Done, without errors.