I tried to use a JavaScript variable to generate multiple directories when copying my files like this:
var foo = '{expand:true,cwd:path1,src:"**",dest:path2,fliter:"isFile",flatten:true},
{expand:true,cwd:path3,src:"**",dest:path4,fliter:"isFile",flatten:true},';
module.exports = function (grunt) {
grunt.initConfig({
copy: {
main: {
files:[foo]
}
}
})
}
This throws me the ERROR:
Cannot use 'in' operator to search for 'src' in {expand:true,cwd:path1,src:"**",dest:path2,fliter:"isFile",flatten:true},{expand:true,cwd:path3,src:"**",dest:path4,fliter:"isFile",flatten:true},
when i paste the Content of the variable in, it works.
Is there any solution to this?
thanks :)
Related
I started using grunt in my build process. In package.json I include variables to be replaced this way:
{
"name": "myApp",
"variableToReplace":{
"var1":"var1_replacement",
"var2":"var2_replacement"
},
...
}
However, I do not know how to use this variableToReplace in Gruntfile.js so that it will automatically look up all properties then replace them with the corresponding values. Is it possible using Grunt?
'string-replace': {
dist: {
files: {
//A list of files
},
options: {
//What to put here?
}
}
}
Revised Answer (after comment)
... Is there anyway to loop through the key-value pair of variableToReplace and replace, for example, var1 with var1_replacement.
Yes, this can be achieved by utilizing a Custom Task. The custom task should perform the following:
Read the variableToReplace object from package.json.
Dynamically build the options.replacements array.
Configure/set the option.replacements array using grunt.config.set
Then finally run the task using grunt.task.run.
The following Gruntfile.js demonstrates this solution:
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-string-replace');
grunt.initConfig({
'string-replace': {
dist: {
files: [{
expand: true,
cwd: 'src/',
src: '**/*.css',
dest: 'dist/'
}],
options: {
replacements: [] // <-- Intentionally empty and will be dynamically
// configured via `configAndRunStringReplace`.
}
}
}
});
/**
* Helper task to dynamically configure the Array of Objects for the
* `options.replacements` property in the `dist` target of the `string-replace`
* task. Each property name of the `variableToReplace` Object (found in
* `package.json`) is set as the search string, and it's respective value
* is set as the replacement value.
*/
grunt.registerTask('configAndRunStringReplace', function () {
// 1. Read the `variableToReplace` object from `package.json`.
var replacements = grunt.file.readJSON('package.json').variableToReplace,
config = [];
// 2. Dynamically build the `options.replacements` array.
for (key in replacements) {
config.push({
pattern: new RegExp(key, 'g'),
replacement: replacements[key]
});
}
// 3. Configure the option.replacements values.
grunt.config.set('string-replace.dist.options.replacements', config);
// 4. Run the task.
grunt.task.run('string-replace:dist');
});
// Note: In the `default` Task we add the `configAndRunStringReplace`
// task to the taskList array instead of `string-replace`.
grunt.registerTask('default', ['configAndRunStringReplace']);
}
Important note regarding Regular Expressions:
The docs for grunt-string-replace states:
If the pattern is a string, only the first occurrence will be replaced...
To ensure that multiple instances of the search/find string are matched and replaced the configAndRunStringReplace custom task utilizes a Regular Expression with the global g flag.
So, any instances of the following regex special characters:
\ ^ $ * + ? . ( ) | { } [ ]
which may be used in a search word (i.e. as a key/property name in your package.json) will need to be escaped. The typical way to escape these characters in a Regex is to add a backslash \ before the character (E.g. \? or \+ etc..). However, because you're using key/property names in JSON to define your search word. You'll need to double escape any of the previously mentioned characters to ensure your JSON remains valid. For Example:
Lets say you wanted to replace question marks (?) with exclamation marks (!). Instead of defining those rules in package.json like this:
...
"variableToReplace":{
"?": "!"
},
...
Or like this:
...
"variableToReplace":{
"\?": "!"
},
...
You'll need to do this (i.e. use double escapes \\):
...
"variableToReplace":{
"\\?": "!"
},
...
Original Answer
The following contrived example shows how this can be achieved:
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-string-replace');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), // 1. Read the package.json file.
'string-replace': {
dist: {
files: {
'dist/': ['src/css/**/*.css'],
},
options: {
replacements: [{
// 2. Use grunt templates to reference the properties in package.json
pattern: '<%= pkg.variableToReplace.var1 %>',
replacement: '<%= pkg.variableToReplace.var2 %>',
}]
}
}
}
});
grunt.registerTask('default', ['string-replace']);
}
Notes
Add pkg: grunt.file.readJSON('package.json') to the grunt.initConfig() section of your Gruntfile.js. This will parse the JSON data stored in package.json.
Use grunt templates to access the properties of package.json. The standard JavaScript dot notation is used to access the property values, (e.g. pkg.variableToReplace.var1), and is wrapped in a leading <%= and trailing %>
Using the contrived Gruntfile.js configuration above with your the package.json data (as described in your question). The following would occur:
Any instances of the string var1_replacement found in any of the .css files stored in the src/css/ directory will be replaced with the string var2_replacement.
The resultant files will be saved to the dist/ directory.
I am new to grunt.
My requirement is that I need to uglify my files based on the variable set on another file.
Let's say I have some abc.js file in which I have a variable var is_uglify = true;
I need to read the value of the variable in gruntfile and perform the build accordingly.
If variable is true, I need to do:
grunt.registerTask('build', ['clean:build','uglify']);
otherwise
grunt.registerTask('build', ['clean:build']);
Can anyone help with this?
This can be achieved by:
Defining a Custom Task - namely getValue in the gist below.
In the getValue Task/Function utilize grunt.file.read to obtain the contents of abc.js.
Then use a regex to match the Boolean value assigned to the variable is_uglify.
Once the Boolean value for is_uglify is obtained then conditionally run either the registered Task named buildA or buildB using grunt.task.run
Gruntfile.js
The following gist shows how this can be achieved:
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
uglify: {
// ... <-- Define as necessary.
},
clean: {
build: {
//... <-- Define as necessary.
}
}
});
grunt.registerTask('getValue', 'Gets the value of a variable', function () {
var filepath = "path/to/abc.js", // <-- Define as necessary.
content = grunt.file.read(filepath),
value = content.match(/(?:var is_uglify = )(true|false);/);
if (!value) {
grunt.fail.warn(
'\'var is_uglify = [true|false];\' not found in: ' + filepath['yellow']
)
}
if (value[1] === 'true') {
grunt.task.run(['buildA']);
} else {
grunt.task.run(['buildB']);
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('build', ["getValue"]);
grunt.registerTask('buildA', ['clean:build','uglify']);
grunt.registerTask('buildB', ['clean:build']);
};
Additional Notes
In the following line of code the "path/to/abc.js" part will need to be redefined as per your directory structure. This must be the path to your file containing var is_uglify = ...;:
var filepath = "path/to/abc.js",
An explanation to the regex pattern /(?:var is_uglify = )(true|false);/ can be found here. It will find the first match only in abc.js.
The getValue Task/Function will warn if the is_uglify variable is missing and the Task/function simply fails and returns early.
After you have defined the configuration for the uglify and clean:build Task run $ grunt build via your CLI.
I'm trying to replace some placeholders in different files as I copy. My gruntfile works fine, but adding in the process option to do the replacements, it's just not working. Below is the relevant section of my gruntfile:
grunt.initConfig({
copy: {
js: {
files: [{
expand: true,
cwd: 'src/wp-content/themes/pilau-starter/',
src: ['**/*.js'],
dest: 'public/wp-content/themes/pilau-starter/'
}],
options: {
process: function ( content ) {
console.log( content );
content = content.replace( /pilauBreakpointLarge/g, breakpoints.large );
content = content.replace( /pilauBreakpointMedium/g, breakpoints.medium );
return content;
}
}
},
}
});
The paths can be understood in the context of the code on GitHub: https://github.com/pilau/starter (the public directory isn't committed to the repo because it's a starter theme). Those paths are variables in my original Gruntfile, and are working fine in all other tasks.
All the vars are set up OK. I've included the console.log( content ) to check if the process function's actually running - it doesn't seem to be, so I guess it's basic syntax.
There's an answer (https://stackoverflow.com/a/28600474/1087660) which seems to address this, but as far as I can tell, that way of doing it is simply bad JS syntax - not sure how it got marked as right.
--verbose output for running the copy task:
Running "copy:js" (copy) task
Verifying property copy.js exists in config...OK
Files: src/wp-content/themes/pilau-starter/js/admin.js -> public/wp-content/themes/pilau-starter/js/admin.js
Files: src/wp-content/themes/pilau-starter/js/flickity.js -> public/wp-content/themes/pilau-starter/js/flickity.js
Files: src/wp-content/themes/pilau-starter/js/global.js -> public/wp-content/themes/pilau-starter/js/global.js
Files: src/wp-content/themes/pilau-starter/js/modernizr.js -> public/wp-content/themes/pilau-starter/js/modernizr.js
Files: src/wp-content/themes/pilau-starter/js/picturefill.js -> public/wp-content/themes/pilau-starter/js/picturefill.js
Files: src/wp-content/themes/pilau-starter/js/respond.js -> public/wp-content/themes/pilau-starter/js/respond.js
Options: processContent=false, processContentExclude=[], process=undefined
Options: processContent=false, processContentExclude=[], process=undefined
Copying src/wp-content/themes/pilau-starter/js/admin.js -> public/wp-content/themes/pilau-starter/js/admin.js
Reading src/wp-content/themes/pilau-starter/js/admin.js...OK
Writing public/wp-content/themes/pilau-starter/js/admin.js...OK
Your version of grunt-contrib-copy is 0.4.0. As correctly point out by #nemesv above the property name to use in this version would be processContent not process.
I cloned your repo and switched to json-breakpoints branch. And ran grunt copy:js and it replaced the content.
Now,when you run grunt copy:js --verbose it will still show this
processContent is logged undefined because grunt uses JSON.stringify to log a value. And JSON.stringify returns undefined when you pass it a function definition.
If you are interested, here's the method reponsible for logging all the option
Log.prototype.writeflags = function(obj, prefix) {
var wordlist;
if (Array.isArray(obj)) {
wordlist = this.wordlist(obj);
} else if (typeof obj === 'object' && obj) {
wordlist = this.wordlist(Object.keys(obj).map(function(key) {
var val = obj[key];
return key + (val === true ? '' : '=' + JSON.stringify(val));
}));
}
this._writeln((prefix || 'Flags') + ': ' + (wordlist || '(none)'.cyan));
return this;
};
This doesn't appear to be an issue with the process option at all, but more an issue with srcThemeDir. I would log it to make sure you know exactly what it is, as it appears that it is causing the copy task to not find any files (and therefore not call the process function).
I'm working on setting up series of grunt tasks that work with RequireJS r.js compiler:
1) generates a .json file listing of all files in a directory
2) strips the ".js" from the filename (requirejs requires this)
3) use grunt.file.readJSON() to parse that file and use as a configuration option in my requirejs compilation task.
Here is the relevant code from my gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
// create automatic list of all js code modules for requirejs to build
fileslist: {
modules: {
dest: 'content/js/auto-modules.json',
includes: ['**/*.js', '!app.js', '!libs/*'],
base: 'content/js',
itemTemplate: '\t{' +
'\n\t\t"name": "<%= File %>",' +
'\n\t\t"exclude": ["main"]' +
'\n\t}',
itemSeparator: ',\n',
listTemplate: '[' +
'\n\t<%= items %>\n' +
'\n]'
}
},
// remove .js from filenames in module list
replace: {
nodotjs: {
src: ['content/js/auto-modules.json'],
overwrite: true,
replacements: [
{ from: ".js", to: "" }
]
}
},
// do the requirejs bundling & minification
requirejs: {
compile: {
options: {
appDir: 'content/js',
baseUrl: '.',
mainConfigFile: 'content/js/app.js',
dir: 'content/js-build',
modules: grunt.file.readJSON('content/js/auto-modules.json'),
paths: {
jquery: "empty:",
modernizr: "empty:"
},
generateSourceMaps: true,
optimize: "uglify2",
preserveLicenseComments: false,
//findNestedDependencies: true,
wrapShim: true
}
}
}
});
grunt.loadNpmTasks('grunt-fileslist');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['fileslist','replace', 'requirejs']);
I'm running into a problem where, if the "content/js/auto-modules.json" file doesn't already exist on load of my config file, the file.readJSON() is executed immediately, before the file exists and the entire task fails and throws "Error: Unable to read file " If the file already exists, everything works beautifully.
How can I set this up so that the task configuration waits for that file to be created in the first task, and modified in the second task before it tries to load & parse the JSON in it for the third task? Or is there another way (perhaps using a different plugin) to generate a json object in one task, and then pass that object to another task?
Old post but I had a similar experience.
I was trying to load a some json config like:
conf: grunt.file.readJSON('conf.json'),
but if this file did not exist then it would fall in a heap and not do anything.
So I did the following to load it and populate defaults if it didnt exist:
grunt.registerTask('checkConf', 'ensure conf.json is present', function(){
var conf = {};
try{
conf = grunt.file.readJSON('./conf.json');
} catch (e){
conf.foo = "";
conf.bar = "";
grunt.file.write("./conf.json", JSON.stringify(conf) );
}
grunt.config.set('conf', conf);
});
You still may have some timing issues but this approach may help someone with a readJSON error.
So I've got this grunt-contrib-jade setup that is working just fine
Everything is fine when I include my data in the (exported) Gruntfile myself:
module.exports = {
website: {
options: {
data: {
pageTitle: "This is my website",
greeting: "Hello world",
},
debug: true,
pretty: true
},
files: {
'build/website/index.html': 'src/jade/template/index.jade'
}
}
};
It merges my index.jade with my data values and my index.html output is the way it should be. But when I want to load an external file to define my data it goes wrong:
options: {
data: function (dest, src) {
// Return an object of data to pass to templates
return require('src/jade/template/locals.json');
},
debug: true,
pretty: true
},
files: {
'build/website/index.html': 'src/jade/template/index.jade'
}
The require path is valid, I triple checked it. It's located in the same folder as my index.jade. However I still keep getting this error:
Running "jade:website" (jade) task
>> Jade failed to compile "src/jade/template/index.jade".
>> Error: Cannot find module './locals.json'
>> Destination not written because compiled files were empty.
I tried just about everything, but I just don't see it.
Local modules need to be prepended with './' when you require them.
data: function (dest, src) {
// Return an object of data to pass to templates
return require('./src/jade/template/locals.json');
}
will work. You're not doing anything with the function (at least yet), so this could also be
data: require('./src/jade/template/locals.json')
or even
data: grunt.file.readJSON('./src/jade/template/locals.json').