I am in the process of converting huge Gruntfile into multiple small script files. I am using "load-grunt-config" for that.
I have created individual files for each task and placed them in grunt folder.
Register task in gruntFile:
grunt.registerTask('default', ['concat', 'uglify', 'sass']);
Changed above register task to following in aliases.json
{
"default": [
"concat",
"uglify",
"sass"
]
}
I have to define one more task in alaiases.json. Respective code in gruntfile is as follows.
grunt.registerTask('watch:lint', function() {
grunt.config.set('watch.dev.tasks', 'lint');
grunt.task.run('watch:dev');
});
Function in above register task can't be defined in aliases.json. Where and how it should specified when using multiple script files?
Thanks in Advance
Related
I have this closure-compiler task defined with following options:
'closure-compiler': {
files: {
},
options: {
externs: [],
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
create_source_map: '<%= sourceDir %>js/<%= outputName %>.min.js.map',
output_wrapper: '%output%\n//# sourceMappingURL=<%= sourceMapURL %>js/<%= outputName %>.min.js.map'
}
}
the sourcemap is created and it looks like this:
{
"version":3,
"file":"build/js/game.min.js",
"lineCount":39,
"mappings":"AAEA,...",
"sources":["/src/js/utils.js","/src/js/game/Button.js",...],
"names":[...]
}
but then the source map doesnt work, what I need is:
{
"version":3,
"file":"game.min.js",
"lineCount":39,
"mappings":"AAEA,...",
"sources":["utils.js","game/Button.js",...],
"names":[...]
}
what should I do to have the sourcemap created in that form?
For Grunt, there are many options for sourcemaps that have to be handled as a separate build step. It lacks the power of the gulp-sourcemaps plugin and so either each tool has to handle every conceivable option for generating a sourcemap or another tool must be used.
Post processing a sourcemap in this fashion isn't too difficult as sourcemaps are JSON data.
grunt-sourcemap-localize looks to do exactly what you are wanting.
I'm trying to use the grunt-modernizr plugin in my project but I'm receiving the following output when I run tasks:
Running "modernizr:dist" (modernizr) task
>> Explicitly including these tests:
>> pointerevents
Looking for Modernizr references
I'm not receiving any type of error the terminal just goes back to the directory that I'm in, as if it's just giving up.
Here is my grunt file:
module.exports = function(grunt) {
grunt.initConfig ({
// Do grunt-related things in here
pkg: grunt.file.readJSON('package.json'),
modernizr: {
dist: {
"dest": "javascripts/modernizr-custom.js",
"parseFiles": true,
"customTests": [],
"devFile": "javascripts/modernizr-custom.js",
"outputFile": "javascripts/min/modernizr-custom.min.js",
"tests": [
"pointerevents",
"css/pointerevents"
],
"extensibility": [
"setClasses"
],
"uglify": false
}
},
cssmin: {
target: {
files: {
'css/min/bootstrap.min.css': ['css/bootstrap.css']
}
}
},
});
grunt.loadNpmTasks("grunt-modernizr");
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default',['modernizr', 'cssmin']);
};
Output from running grunt --verbose:
Initializing
Command-line options: --verbose
Reading "gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Registering "grunt-modernizr" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Loading "modernizr.js" tasks...OK
+ modernizr
Registering "grunt-contrib-cssmin" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Loading "cssmin.js" tasks...OK
+ cssmin
Loading "gruntfile.js" tasks...OK
+ default
No tasks specified, running default tasks.
Running tasks: default
Running "default" task
Running "modernizr" task
Running "modernizr:dist" (modernizr) task
Verifying property modernizr.dist exists in config...OK
Files: -> javascripts/modernizr-custom.js
Verifying property modernizr exists in config...OK
>> Explicitly including these tests:
>> pointerevents
Looking for Modernizr references
This is something I just came across too and seems to be grunt-modernizr stopping after customizr doesn't find any files to crawl (it crawls by default).
If you add "crawl": false to your modernizr:dist task that should fix the problem.
Also, I think "extensibility": [ "setClasses" ], should be "options": [ "setClasses" ],.
To use the grunt-modernizr task to crawl your code for Modernizr references you'll have to look at the config properties for the customizr task as this is part of grunt-modernizr 's node_modules:
modernizr: {
dist: {
dest: 'bower_components/modernizr/build/modernizr.custom.js',
uglify: false,
options: [
'setClasses',
'addTest'
],
files: {
src: ['js/app/**/*.js', 'js/app/*.js']
}
}
}
devFile: doesn't seem to matter where you point at
dest: instead of outputFile, note I'm just outputting to a build directory that's not part of the package
uglify: false if you have other minifying options like bundleconfig.json
options: to bypass the default options { "setClasses", "addTest", "html5printshiv", "testProp", "fnBind" }
files: to enlist your crawlable director(y|ies), make sure you take care of the root files and/or subdirectories as well
Load the required tasks, in my case:
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-modernizr');
grunt.loadNpmTasks('grunt-contrib-copy');
Refer to the 'modernizr:dist' task => grunt.registerTask('default', ['clean', 'modernizr:dist', 'copy']);
Which results in an unminified 34kb file:
Running "clean:files" (clean) task
19 paths cleaned.
Running "modernizr:dist" (modernizr) task
Looking for Modernizr references
1 match in js/app/classes/yambo.options.js
bgpositionxy
1 match in js/app/modules/yambo.audio.js
audio
Ready to build using these settings:
setClasses, addTest
Building your customized Modernizr...OK
Success! Saved file to bower_components/modernizr/build/modernizr.custom.js
Process terminated with code 0.
Running "copy:main" (copy) task
Copied 11 files
Done, without errors.
This way there's no need to even go to the online build to add a feature test. Simply reference Modernizr throughout your js code:
window.Yambo = (function($, modernizr, ns){
ns.Audio = {
extension: (function () {
return modernizr && modernizr.audio.mp3
? 'mp3'
: modernizr.audio.ogg
? 'ogg'
: 'wav';
}())
};
return ns;
}(window.jQuery, window.Modernizr, window.Yambo || {}));
Make sure to use the correct property name for a feature detection, so customizr can pick it up and provide a test to your custom build.
This should be also possible for css but haven't been testing that for the moment.
It looks like you missed source files.
http://gruntjs.com/configuring-tasks#files-object-format
Try to include
"dist": {
"files": {
"src": ['!<%= appDir %>assets/js/bower/modernizr/**']
}
}
I am trying to add custom task to a sails js application. accroding to the documentation I create files in the following way.
tasks/register/test.js
module.exports = function (grunt) {
grunt.registerTask('test', ['mochaTest']);
};
tasks/config/mochaTest.js
module.exports = function(grunt) {
grunt.config.set('mochaTest', {
test: {
options: {
reporter: 'spec',
captureFile: 'results.txt', // Optionally capture the reporter output to a file
quiet: false, // Optionally suppress output to standard out (defaults to false)
clearRequireCache: false // Optionally clear the require cache before running tests (defaults to false)
},
src: [
'test/bootstrap.test.js',
'test/unit/**/*.js'
]
}
});
grunt.loadNpmTasks('grunt-mocha-test');
};
I have written test cases inside test/unit folder. I can run these test using grunt mochaTest command. But using 'sails lift --test' command does not run the test cases. instead it just run the sails application. I also tried the following command. ()
NODE_ENV=test sails lift
It also does not run the test cases. It just run the sails application. (http://sailsjs.org/documentation/concepts/assets/task-automation)
What am I missing here ?
Modify the file "tasks/register/default.js" to have the following code:
module.exports = function (grunt) {
grunt.registerTask('default', ['compileAssets', 'linkAssets', 'grunt-mocha-test', 'watch']);
};
then just launch the app with "sails lift"
We're using Grunt to build multiple, but similar, applications in one build.
It's a rather complex and large project with a folder for each application and a folder named share with lots of shared components.
multiple karma targets
Angular injects dependency by name (String) and our applications have files with the same names like HomeController, MenuController. This forces us to split up the karma targets per application so dependencies are loaded only from the shared and specific application being tested.
Fatal error
When using grunt to run the karma targets it only runs the first successful and fails to run the second. Fatal error: listen EADDRINUSE The error is somehow related to a port being used.
Karma config (simplified)
module.exports = function(config) {
'use strict';
config.set({
autoWatch: false,
basePath: '../',
frameworks: ['jasmine'],
exclude: [],
browsers: ['PhantomJS'],
plugins: [
'karma-html-reporter',
'karma-junit-reporter',
'karma-coverage',
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-brackets'
],
singleRun: false,
colors: true,
logLevel: config.LOG_DEBUG
});
};
Grunt-karma config
var dep = [
'bower_components/**/*.js',
'app/shared/**/*.js',
];
module.exports = {
options: {
configFile: 'test/karma.conf.js',
reporters: ['brackets', 'html', 'junit', 'coverage'],
browsers: ['PhantomJS'],
port: 9002,
singleRun: true
},
A: {
options: {
files: dep.concat([
'app/A/src/**/*.js'
]),
}
},
B: {
options: {
files: dep.concat([
'app/B/src/**/*.js'
]),
}
}
};
How can I run both karma targets (A and B) in the same the grunt task?
My guess is I have to either reset the karma server (phantomJs?) or run them as separate "sets" on the same target, but I can't find out how to do it.
Hope anyone out there might help! Thanks!
Update1
This issue on github seems to address the same problem, but has not yet made it to a release.
Maybe you can just move your port option into the targets and choose a different port for each one?
A: {
options: {
port: 9011,
files: dep.concat([
'app/A/src/**/*.js'
]),
}
},
B: {
options: {
port: 9012,
files: dep.concat([
'app/B/src/**/*.js'
]),
}
}
workaround that works
Remove the the karma tasks from the the distribution task.
Instead of trying to run multiple karma targets in one grunt task, you can execute multiple grunt commands separately from the command line (mainly on the continuous integration server. For development there is rarely a need to run all targets)
The command could be: (optional xxxxxx is any task you want to run after testing has completed)
grunt testA && grunt testB && grunt xxxxxx
I am a gruntjs newbie and am trying to write a build for JS frontend. A requirement is set so that all the source files that enter the build process (concatenation, minification) must be defined in an external file:
|-config
|- js.json
|-src
|- js
|- a.js
|- b.js
|- Gruntfile.js
|- package.json
I have simplified the project structure to illustrate the problem. The config/js.json looks like this:
[
"<%=js_dir%>/a.js",
"<%=js_dir%>/b.js"
]
Gruntfile.js looks like this:
module.exports = function(grunt) {
grunt.initConfig({
concat: {
"options": {"separator": ";"},
"build": {
"src": "<%= grunt.template.process(grunt.file.read('./config/js.json'),{data: {js_dir: './src/js'}})%>"
,
"dest": "build/app.js"
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
When I run it an empty output file is made, because the source list is empty:
...
Reading ./config/js.json...OK
Files: [no src] -> build/app.js
Reading ./config/js.json...OK
Writing out...OK
Writing build/app.js...OK
File "build/app.js" created.
Done, without errors.
To verify my logic I dumped the processed sources list by changing the src property like this:
"src": "<%= grunt.file.write('out',grunt.template.process(grunt.file.read('./config/js.json'),{data: {js_dir: './src/js'}}))%>"
The contents of the out file show that template processing logic is valid:
[
".src/js/a.js",
".src/js/b.js"
]
Since the src property accepts a hardcoded JSON array of source files my guess is that the binding of the sources list is done before the templating is done.
The gruntjs verbose output shows the reading of config/js.json before and after the concatenation which confuses me.
I tried rewriting the config/js.json file so that all the JSON array fits in one line but to no avail.
If this can be done, please tell me how. If it can't be done please tell me why.
My environment:
grunt: grunt-cli v0.1.9, grunt v0.4.1
nodejs: v0.11.6-pre
os: Linux localhost 3.2.0-23-generic #36-Ubuntu x86_64 GNU/Linux
The Grunt config will process templates as the config is read. So you dont need an additional grunt.template.process. Assuming config/js.json is valid JSON just do this:
module.exports = function(grunt) {
grunt.initConfig({
js_dir: 'src/js',
concat: {
options: {separator: ";"},
build: {
src: require('./config/js.json'),
dest: "build/app.js"
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
Always remember Gruntfiles are JavaScript and not JSON.