Gruntfile.js Warning: The "path" argument must be of type string. Received type object Use --force to continue - gruntjs

I'm having an issue with running a grunt copy task. I've a library specified in package.json under dependencies as below
"#tarekraafat/autocomplete.js": "^7.2.0"
and declared copy tasks in Gruntfile.js as below
var paths = {
webroot: "wwwroot/"
};
// destination css path
paths.cssOutput = paths.webroot + "css";
// where to find bower resources
paths.bower_components = paths.webroot + "lib";
// where to find reset.css
paths.resetCss = paths.bower_components + "/html5-reset/assets/css";
module.exports = function (grunt) {
"use strict";
// Project configuration
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
clean: [paths.cssOutput, paths.bower_components],
// copy other css files
copy: {
options: {
'-W069': false,
'reporterOutput': "",
'esnext': true
},
dist: {
expand: true, // required when using cwd
cwd: paths.resetCss, // set working folder / root to copy
src: ['reset.css'], // copy all files and subfolders
dest: paths.cssOutput //'./wwwroot/css/' // destination folder
},
autoCompleteJS: {
expand: true,
cwd: "wwwroot/lib/#tarekraafat/autocomplete.js/dist/js",
src: ['autoComplete.min.js'],
dest: ['wwwroot/js']
},
autoCompleteCSS: {
expand: true,
cwd: "wwwroot/lib/#tarekraafat/autocomplete.js/dist/css",
src: ['autoComplete.css'],
dest: ['wwwroot/css']
}
}
});
// Load the plugin
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('downloadPkgs', ['pkg']);
grunt.registerTask('cleanAll', ['clean']);
grunt.registerTask('copyAll', ['copy']);
};
Upon running the task "copy:autoCompleteJS" or "copy:autoCompleteCSS" individually, I'm getting the following warning
Running tasks: copy:autoCompleteCSS
Running "copy:autoCompleteCSS" (copy) task
Verifying property copy.autoCompleteCSS exists in config...OK
Warning: The "path" argument must be of type string. Received type object Use --force to continue.
Aborted due to warnings.
Process terminated with code 3.
Note: If I run the task "copy:dist" it is working fine. I suspect that the path supplied to cwd in the other two has special character "#" in the directory name is causing the issue.
Appreciated your help.
MSRS.

The dest value for both the autoCompleteJS and autoCompleteCSS Targets in your copy Task should be a String and not an Array.
//...
autoCompleteJS: {
expand: true,
cwd: "wwwroot/lib/#tarekraafat/autocomplete.js/dist/js",
src: ['autoComplete.min.js'],
dest: 'wwwroot/js' // <----- Change to this
},
autoCompleteCSS: {
expand: true,
cwd: "wwwroot/lib/#tarekraafat/autocomplete.js/dist/css",
src: ['autoComplete.css'],
dest: 'wwwroot/css' // <----- Change to this
}
//...
Also, although not entirely necessary to avoid the error, consider changing the src value for both Targets to Strings instead of an Array too.

Related

Gruntfile.js Syntax error: Warning: Task "default" not found. Use --force to continue

This is my very first attempt at configuring a Gruntfile.js and i can't seem to figure out what's causing this "Warning: Task "default" not found. Use --force to continue. Aborted due to warnings." error. Can someone please help me figure out what's wrong with my code. Find source code below:
'use strict';
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/scripts/{,*/}*.js'
]
}
}
}),
copy: {
dist: {
cwd: 'app',
src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],
dest: 'dist',
expand: true
},
fonts: {
files: [
{
//for bootstrap fonts
expand: true,
dot: true,
cwd: 'bower_components/bootstrap/dist',
src: ['fonts/*.*'],
dest: 'dist'
}, {
//for font-awesome
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: 'dist'
}
]
}
},
clean: {
build: {
src: [ 'dist/']
}
});
grunt.registerTask('build', [
'clean',
'jshint',
'copy'
]);
grunt.registerTask('build', [
'jshint'
]);
grunt.registerTask('default',['build']);
};
You have not defined a task named default. A sample, really small gruntfile.js can be found below:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
copy: {
main: {
files: [
{ expand: true, src: ['**'], cwd: 'lib/font-awesome/fonts/', dest: 'fonts/', filter: 'isFile' },
]
}
}
});
grunt.registerTask('default', ['copy:main']);
};
So, in this file, I'm loading the NPM package called grunt-contrib-copy. Then in the config, I specify the config for the copy sub-task by giving it a name of main and including the rules below that. Each grunt sub-task has it's own format of options and configuration that you can follow. Finally, I'm saying that the Grunt task runner should have a task named default followed by an order of operations. The first (and only) in my case is the copy sub-task and the main ruleset. In your case, this may be copy:dist for the copy operation.
Hope that helps get you started.
I've found the syntax error. These characters ')};' closed the config in the wrong place (line 30) which disrupted the flow of the program. so i just had to remove them and put them in their rightful place way down on line 67.
Sorry it turned out to be just a silly mistake on my part and probably nothing relevant to anyone else.

Passing arguments from command line to grunt copy task

var pathValue="";
module.exports = function(grunt) {
grunt.initConfig({
copy: {
main: {
files: [{
cwd: 'srcpath', // set working folder / root to copy
src: '**/*', // copy all files and subfolders
dest: 'pathValue', // destination folder
expand: true
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('copy', function(n) {
var target = grunt.option('target');
pathValue = target;
// do something useful with target here
});
};
I'm trying to pass destination path to the copy task from command line. I tired the command
grunt copy --target=destpath
It says "Done without errors" but new folder is not getting created in the destination directory. Can someone please tell me what's the error in the code?
Try changing dest to a qualified js file path. Like this:
dest: 'dest/bob.js'

Tell Grunt to put source into same target dir

Code that I have:
coffee: {
compile: {
files: {
'server/api/**/*.js': ['server/api/**/*.coffee'] // compile and concat into single file
}
}
},
Meaning, the target Dir should be the same where the .coffee file was found. Above code in Grunt does however create the directory "**" and puts the file "*.js" into it.
This is what I want:
server/api/sample/sample.coffee -> server/api/sample/sample.js
server/api/sample2/sample2.coffee -> server/api/sample2/sample2.js
To compile your files dinamically you have to do it:
glob_to_multiple: {
expand: true,
flatten: true,
cwd: 'server/api',
src: ['**/*.coffee'],
dest: 'server/api',
ext: '.js',
extDot: 'last'
}

Using constants in gruntjs

I am trying to write my first Grunt task to copy some files from my common libs folder, which is out of my project directory.
Project Folder : /home/user/projects/bottle
Common Libs directory : /home/user/projects/common
Files' source are inside Common Libs directory at : lib/general/static/js/
Files' destination inside project folder : lib
I have a properties.json file with Common Libs directory path as shown below
{
"common_libs" : `/home/user/projects/common`
}
Now what I already tried is :
module.exports = function(grunt) {
var properties = grunt.file.readJSON('properties.json'),
paths = {
common_libs : properties.common_libs,
common_libs_js : this.common_libs + "lib/general/static/js/"
};
grunt.initConfig({
copy: {
main: {
files: [
{
expand: true,
flatten : true,
src: [
paths.common_libs_js + "/*"
],
dest: 'lib/',
filter: 'isFile'
}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
I am running grunt as follows
grunt copy
With this no files are copied to the destination.
Help me in this.
Also I want to know
How can I use Ant's property tag type constants in GruntJS? Because I am getting the base folder from properties.json and I need to copy many files from different folders under the base folder.
Can we have these type of constants per task?
Thanks in advance.
There are a few issues with your code. First:
common_libs_js : this.common_libs + "lib/general/static/js/"
Unfortunately this.common_libs is undefined (this doesn't point to where you think it does), so common_libs_js ends up being 'undefinedlib/general/static/js/', which doesn't work.
The second problem is that on that same line you are concatenating paths, but the first path (from the properties file) doesn't seem to end with a slash, and would become '/home/user/projects/commonlib/general/static/js/' if it wasn't for the previous issue.
Third, you'd get a whole bunch of folders inside your dest path. When the expand option is used, Grunt uses the paths as given in the src property to create the folder structure. If you want /home/user/projects/common/lib/general/static/js/foo.js to be copied to lib/foo.js, you should set the cwd option to paths.common_libs_js and the src to '*.js' (or '**/*.js' for a match on any level).
People usually embed configuration properties inside Grunt's config, and then use template strings to access them. A very common way to write your task would be something like this (with a few changes, adjust as needed):
module.exports = function(grunt) {
grunt.initConfig({
properties: grunt.file.readJSON('properties.json'),
copy: {
main: {
expand: true,
cwd: '<%= properties.common_libs %>/lib/general/static/js',
src: '**/*.js',
dest: 'lib'
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
Alternatively, if you want your files to end up in 'lib/general/static/js/' in the destination path too:
module.exports = function(grunt) {
grunt.initConfig({
properties: grunt.file.readJSON('properties.json'),
copy: {
main: {
expand: true,
cwd: '<%= properties.common_libs %>',
src: 'lib/general/static/js/**/*.js',
dest: '.' // because src includes 'lib'
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
If you're not sure how Grunt sees your files, run it with grunt -v and it will tell you.
You might also want to consider git submodules for a non-Grunt solution.
For task-specific constants: you could use the task's (or target's) options hash for that, and access it with template strings:
module.exports = function(grunt) {
grunt.initConfig({
properties: grunt.file.readJSON('properties.json'),
copy: {
options: {
foo: 'lib'
},
main: {
options: {
bar: '**/*.js'
},
expand: true,
cwd: '<%= properties.common_libs %>/<%= copy.options.foo %>/general/static/js',
src: '<%= copy.options.main.bar %>',
dest: 'lib'
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
This is rarely done for anything other than actual options, though. Conflicts with real options can occur. You could also use the target namespace directly, setting the property directly inside main. But again, there are a few property names that may conflict.
If you want to override properties (e.g. for a release build), you can do this:
module.exports = function(grunt) {
grunt.registerTask('release', function() {
grunt.config.set('properties.common_libs', '/usr/lib/shared');
});
grunt.initConfig({
properties: grunt.file.readJSON('properties.json'),
copy: {
main: {
expand: true,
cwd: '<%= properties.common_libs %>/lib/general/static/js',
src: '**/*.js',
dest: 'lib'
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
Then you'd call your task with grunt release copy.
EDIT
Based on your updated question, it doesn't seem like the properties.json file is of much use to you. Why not just specify the properties in your Gruntfile?
module.exports = function(grunt) {
grunt.initConfig({
properties: {
base_dir: '../common',
base_js_dir: '<%= properties.base_dir %>/lib/general/static/js',
base_css_dir: '<%= properties.base_dir %>/lib/general/static/css'
},
copy: {
main: {
expand: true,
cwd: '<%= properties.base_js_dir %>',
src: '**/*.js',
dest: 'lib'
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
You can also use the file together with this, if you want. Or even put these properties (with the template strings) inside the properties.json file. In the end it's just a matter of making Grunt see an object with template strings. It's up to you to provide that somehow.

How can I rename files with Grunt, based on the respective file's parent folder name?

I have a the following structure:
src/
modules/
module1/
js/
main.js
scss/
main.scss
index.html
module2/
js/
main.js
scss/
main.scss
index.html
I'd like to run a grunt task to copy these out to the following structure:
dev/
js/
module1.js
module2.js
css/
module1.css
module2.css
module1.html
module2.html
Is there a way to do this with an existing grunt plugin? If not, how could I achieve this?
This can be done using the grunt-contrib-copy plugin.
The main thing to note is that you can change the destination programmatically by using a rename function (which takes in the destination and source of each file).
Here is a (somewhat brittle) sample Gruntfile.js that should copy to your desired structure:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
copy: {
main: {
files: [
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.js'],
dest: 'dev/js/',
rename: function(dest, src) {
// use the source directory to create the file
// example with your directory structure
// dest = 'dev/js/'
// src = 'module1/js/main.js'
return dest + src.substring(0, src.indexOf('/')) + '.js';
}
},
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.scss'],
dest: 'dev/css/',
rename: function(dest, src) {
return dest + src.substring(0, src.indexOf('/')) + '.css';
}
},
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.html'],
dest: 'dev/',
rename: function(dest, src) {
return dest + src.substring(0, src.indexOf('/')) + '.html';
}
}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
// Default task(s).
grunt.registerTask('default', ['copy']);
};
There's no need to use grunt-contrib-copy just for this any more, you can now take advantage of grunt.file.expandMapping which has options to just change the file extension, or to define a function that returns the output filename.
Here's an example of a files object in a jade task for compiling .jade templates into .html files:
files: [{
expand: true,
src: "**/*.jade",
dest: "<%= distDir %>",
cwd: "<%= assetsDir %>/jade",
rename: function(dest, matchedSrcPath, options) {
// return the destination path and filename:
return (dest + matchedSrcPath).replace('.jade', '.html');
}
}]
It would have been easier to use the ext: '.html' option instead of the rename option in this case, but I'm using rename here so you can see how it works.
More info about the ext and rename (and other) options in the grunt.file docs. Some more examples here and here.
You could simply use the options:
expand : true,
flatten: true
No need for custom rename callbacks.
if u want to rename .coffee files to .js or similar then just adapt it ;)
sudo npm install grunt-contrib-copy
copy: {
rename: {
files: [{
expand: true,
dot: true,
cwd: './app/scripts',
dest: './app/scripts/',
src: [
'**/*.coffee'
],
rename: function(dest, src) {
console.log(dest + src);
return dest + src.replace('.coffee','.js');
}
}]
}
},
Not exactly an answer to your question but i made it here looking for relative dest folders with grunt so... Here is how i solved it
...
base: {
files:
[
{
expand: true,
cwd: 'app/design/frontend/',
src: ['**/Magento_Sales/email-src/*.html'],
dest: '../../Magento_Sales/email/',
rename: function(dest, src, expand) {
src = path.parse(src)
return path.join(expand.cwd, src.dir, dest, src.base);
}
},
],
}
...
This little bit path.join(expand.cwd, src.dir, dest, src.base); just creating the path i need.
expand.cwd = app/design/frontend/
src.dir = <DYNAMIC_FOLDERS>/Magento_Sales/email-src/
dest = ../../Magento_Sales/email/
src.base = <FILE>.html
and all together it = app/design/frontend/<COMPANY>/<MAIN-THEME>/Magento_Sales/email/<FILE>.html
and in my situation it will now compile my html emails in relative destination folders
I wanted to save the file in a min folder created at the root where we found the file so it's more easy to moove the plugin folder into another project :
-- Plugins/
-- bootstrap/
-- bootstrap.js
-- bootstrap.css
-- min/
-- bootstrap.min.js
-- bootstrap.min.css
I post the solution I found thanks to this page maybe it can help others :
uglify: {
options: {
mangle: true
},
dynamic_mappings: {
// Grunt will search for "**/*.js" under "Plugins/" when the "uglify" task
// runs and build the appropriate src-dest file mappings then, so you
// don't need to update the Gruntfile when files are added or removed.
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'Plugins/', // Src matches are relative to this path.
src: ['**/*.js', '!**/*.min.js'], // Pattern to match (ignore .min files)
dest: '/min/', // Destination path prefix.
ext: '.min.js', // Dest filepaths will have this extension.
extDot: 'last', // Extensions in filenames begin after the first dot
rename: function( dest, matchedPath, options ) {
Pathname = matchedPath.substring( 0, matchedPath.indexOf('/') );
Filename = matchedPath.replace( Pathname, '' );
//Return "Plugins / plugin_folder / min / file_name.min.js"
return options.cwd + Pathname + dest + Filename;
}
},
],
},
}

Resources