How to create source maps dynamically with grunt-closurecompiler - gruntjs

I can't get it to work. name_of_current_file needs to somehow be replaced with name of the current file being processed. It seems to me like the options property is only evaluated once and reused for each file.
closurecompiler: {
dev: {
files:[{
expand: true,
flatten: true,
cwd: 'www',
src: ['src/js/*.js', '!src/js/*.min.js'],
dest: 'www/build/js/',
ext: '.min.js',
}],
options: {
// Any options supported by Closure Compiler, for example:
"compilation_level": "ADVANCED_OPTIMIZATIONS",
"create_source_map": name_of_current_file+'.map',
// Plus a simultaneous processes limit
"max_processes": 4,
}
},
}

You can use the replacement variable %outname% in your source map naming.
"create_source_map": '%outname%.map'
Also, make sure you are using the officially supported Grunt Plugin.

Related

Grunt-string-replace not working

I have an app folder where I want to replace http://localhost:8000 for http://fomoapp-melbourne.rhcloud.com in two files: companies-list.component.ts and events-list.component.ts. I am trying to use grunt-replace-string plugin and it seemingly runs successfully with green Done result and no errors, but no replacement happens.
Here is how Gruntfile.js looks like:
module.exports = function(grunt){
[
'grunt-string-replace',
].forEach(function(task){
grunt.loadNpmTasks(task);
});
// configure plugins
grunt.initConfig({
'string-replace': {
dist: {
files: {
'./app/': ['companies-list.component.ts','events-list.component.ts'],
},
options: {
replacements: [{
pattern: 'http://localhost:8000',
replacement: 'http://fomoapp-melbourne.rhcloud.com',
}]
}
}
},
});
// register tasks
grunt.registerTask('default', ['string-replace']);
};
The Grunt Files object is for specifying a mapping of source files to destination files. The purpose of this mapping is to tell Grunt to get the contents of the files in source, do something to the contents, and then write the response to a new file in the destination folder.
It looks to me from your configuration that you want Grunt to rewrite two files in the app/ directory. This is not going to work. I will bet that if you run grunt with the verbose option, grunt --verbose, your output will contain the following:
Files: [no src] -> ./app/
This is because Grunt cannot find the source files because you need to specify their relative paths.
It's up to you how you want to structure your app, but you might want to have a src/ folder and a dist/ folder under app/. If you choose to build your files objects dynamically, your config might look something like this:
files: [{
expand: true,
cwd: './app/src/',
dest: './app/dest/',
src: ['companies-list.component.ts', 'events-list.component.ts']
}]
Additionally, the documentation for grunt-string-replace states:
If the pattern is a string, only the first occurrence will be replaced, as stated on String.prototype.replace.
This means that if you want multiple instances of your string to be replaced, you must provide a Regular Expression literal. For example:
replacements: [{
pattern: /http:\/\/localhost:8000/g,
replacement: 'http://fomoapp-melbourne.rhcloud.com'
}]

Running "htmlmin:dist" (htmlmin) task freezes

Running "htmlmin:dist" (htmlmin) task freezes when I run it in command line.
My task configuration is as follows:
htmlmin: { // Task
dist: { // Target
options: { // Target options
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: true,
removeCommentsFromCDATA: true,
removeRedundantAttributes: true,
collapseBooleanAttributes: true
},
files: [{
expand: true,
cwd: '<%= cwdPath %>',
src: ['**/*.html', '!index-requirejs.html', '!online/**/*.html', '!onlinetradingmanagement/*.html'],
dest: '<%= destPath %>min/'
}]
}
}
Files are properly minified and generated as per the config, but from command line the execution of that task seems not to complete itself.
I want to integrate this into Jenkins-CI, so cannot afford on the task to freeze.
Found the reason behind this problem as it was occurring to some other people too suddenly out of nowhere.
Reference from the issue that I raised a few days back:
grunt-contrib-htmlmin
This issue might arise if you have invalid HTML.
Try running grunt htmlmin:dist --verbose
Check the file for syntax errors and see if that resolves the problem.
It would help to erase destination directory.
In my case, grunt couldn't overwrote minified files.

google closureCompiler doesn't want to read my goog.getMsg()

I'm trying to compile my js files using closure compiler, but it's giving me this error:
ERROR - goog.getMsg() function could be used only with MSG_* property or variable
my closureCompiler options are:
closureCompiler: {
options: {
compilerFile: 'temp/compiler.jar',
compilerOpts: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
//compilation_level: 'WHITESPACE_ONLY',
language_in: 'ECMASCRIPT6',
language_out: 'ECMASCRIPT5_STRICT',
formatting: 'PRETTY_PRINT',
externs: ['src/js/compiled/react-extern.js'],
warning_level: 'verbose',
summary_detail_level: 3,
output_wrapper: '"(function(){%output%}).call(window);"',
create_source_map: 'src/js/compiled/output.js.map',
manage_closure_dependencies: true,
use_types_for_optimization: null,
debug: true
},
execOpts: {
maxBuffer: 999999 * 1024
}
},
compile: {
//src: 'src/js/debug/**/*.js',
src: [
'temp/closure-library/closure/goog/base.js',
'src/js/compiled/test.js'
],
dest: 'src/js/compiled/compiled.js'
},
},
I believe I'm missing a flag, but I don't which one to write ?
You can't include goog.getMsg() in your code.
It has to be:
var MSG_SOMETHING = goog.getMsg('something');
and use the MSG_SOMETHING instead.
Google Closure Compiler enforced that, so you could write all your variable in one file and send this one to get translated.

How can I use grunt-sync to sync a single file (specifically web.config)?

I'm attempting to have the web.config of the site update only if changed. As configured below, this erases the entire contents of the website except for web.config. Any ideas on how to configure this? "siteFolder" is defined elsewhere.
webconfig: {
files: [
{ src: ['web.config'], dest: siteFolder }
],
ignoreInDest: ['!web.config'],
pretend: true,
updateAndDelete: true,
compareUsing: "md5",
verbose: true
}
by doing:
updateAndDelete: false
It will only update those files. It won't handle deletes, but thats OK in this case.

Configure Grunt File Name Matching for Files with Multiple Dots

I just started using grunt, and love it.
I keep running into an issue that seems like it might be pretty common.
Here it is. I have files named so that words after a dot are something like classes. eg:
layout.coffee
layout.blog.coffee
layout.site.coffee
My grunt task is configured to watch these files and translate them to js like this:
coffee:
dev:
files: [
expand: true
cwd: "<%= yeoman.app %>"
src: ["**/*.coffee"]
dest: "<%= yeoman.dev %>"
ext: ".js"
]
The problem, I think, is that using ext makes the target for all three .coffee files the destination file layout.js, which isn't the intention.
Is there a nice way to configure grunt file mapping for filenames with multiple dots?
Right now I have to change my naming convention to use - instead of ., which is a drag :(
Note that there is another option "extDot" that you can use to specify after which dot the ext should apply (first or last):
E.g.
files: [{
expand: true,
src: ['*.js','!*min.js'],
dest: 'js',
cwd: 'js',
ext: '.min.js',
extDot: 'last'
}]
Take a look at the "Building the files object dynamically" section of Configuring Tasks.
Instead of specifying ext, you can specify rename which is a function that lets you create your own mapping for the file names.
The problem you are running into was brought up as an issue on github and the answer from the grunt folks was that the "extension" of a file should be everything after the first "." instead of the last.
Hope that helps you!
That's the workaround I'm using in my projects:
uglify : {
build : {
src : ['**/*.js', '!*.min.js'],
cwd : 'js/',
dest : 'js/',
expand : true,
rename : function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
filename = filename.substring(0, filename.lastIndexOf('.'));
return dest + folder + filename + '.min.js';
}
}
}
When the filename is like jquery.2.0.3.js then after minifying that it will be jquery.2.0.3.min.js.

Resources