Component-preload.js generated with comments - gruntjs

I'm working on some performance aspects for my app and, as a consequence, trying to remove the comments from the Component-preload.js file generated when building the app (I'm basically trying to uglify the component-preload)
To do that, I firstly tried to use the "#sap/grunt-sapui5-bestpractice-build" as in its documentation is stated that there's an uglify, but unfortunately it doesn't remove the comments.
Now, I'm working with external plugins to be able to achieve this, but it seems is just "impossible".
This is my gruntfile.js for the moment:
"use strict";
// Initial standard SAP Plugin
grunt.loadNpmTasks("#sap/grunt-sapui5-bestpractice-build");
// Copy plugin configuration
var copyConfig = {
copy: {
main: {
expand: true,
cwd: 'webapp/controller',
src: '**',
dest: 'webapp/aux',
}
}
};
grunt.config.merge(copyConfig);
grunt.loadNpmTasks("grunt-contrib-copy");
// Uglify plugin configuration
var uglifyConfig = {
uglify: {
dist: {
options:{
mangle:false
},
output: {
comments: false
},
files: [{
expand: true,
cwd: 'webapp/controller',
src: '**/*.js',
dest: 'webapp/controller'
}]
}
}
};
grunt.config.merge(uglifyConfig);
grunt.loadNpmTasks("grunt-contrib-uglify");
// Move plugin configuration
var moveConfig = {
move: {
main: {
src: 'webapp/aux/*',
dest: 'webapp/controller/'
}
}
};
grunt.config.merge(moveConfig);
grunt.loadNpmTasks("grunt-move");
// Custom clean plugin configuration
var cleanConfig = {
clean: {
custom: {
src: 'webapp/aux'
}
}
};
grunt.config.merge(cleanConfig);
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.registerTask("default", [
"clean",
"lint",
"copy",
"uglify",
"build",
"move",
"clean:custom"
]);
As you can see, I'm basically:
Copying the sources with comments.
Uglifying the original ones.
Calling the build ( expecting that it uses the uglified sources to generated the Component-preload.js without comments )
Restoring the ones that have comments into the "Controller" folder again.
At this point, I don't know which files is the IDE using to generate the Component-preload.js because I've even tried to do a build with:
Move: Moving the files from the "Controller" folder to an aux one.
Build: Expecting the build to crash or at least, not having any controller in the Component-preload.js
But the result from this test is that Component-preload.js is created and it contains the controller code, so it seems like before starting the whole procedure, the IDE saves a copy of all files.
Could you kindly help me understanding this? Or at least, how can I remove comments from the generated Component-preload.js file??
Thanks in advance and sorry if I haven't explained anything very clear.
Kr,
Pedro.

Related

Concatenating php files and Javascript with Grunt.js

I am having an issue trying to get my Grunt.js file to work. Currently I have it set up to just concatenate all my php function files, and decided since a lot of my work projects use Bootstrap, to concatenate only the javascript files I'll be using. However, when I set it up, hoping I did set it up correctly, my grunt execution does not create/edit the javascript final destination file, nor the php functions file. I am not sure what I have done incorrectly but here is the following code:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
options: {
separator: 'rn'
},
dist: {
src: [
// Comment or uncomment any Bootstrap JS files
// you will not be using
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/alert.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/button.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/carousel.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/collapse.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/dropdown.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/modal.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/phantom.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/popover.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/qunit.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/scrollspy.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/tether.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/tab.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/tooltip.js'
],
dest: 'wp-content/themes/base_theme/assets/js/required/bootstrap/bootstrap.min.js'
}
},
php: {
options: {
stripBanners: true,
separator: '\n?>\n',
},
dist: {
src: [
// To create a new location, follow pattern below
// Comment out what you don't need a re-concat
'wp-content/themes/base_theme/assets/functions/basic.php',
'wp-content/themes/base_theme/inc/custom-header.php',
'wp-content/themes/base_theme/inc/customizer.php',
'wp-content/themes/base_theme/inc/extras.php',
'wp-content/themes/base_theme/inc/jetpack.php',
'wp-content/themes/base_theme/inc/template-tags.php',
'wp-content/themes/base_theme/inc/wpcom.php',
'wp-content/themes/base_theme/assets/functions/bootstrap-nav.php',
'wp-content/themes/base_theme/assets/functions/enqueue.php'
'wp-content/themes/base_themey/assets/functions/custom-post-type.php',
'wp-content/themes/base_theme/assets/functions/internal-template.php',
'wp-content/themes/base_theme/assets/functions/custom-taxonomy.php',
'wp-content/themes/base_theme/assets/functions/acf.php',
'wp-content/themes/base_theme/assets/functions/custom.php'
'wp-content/themes/base_theme/assets/functions/custom-sidebar.php'
],
dest: 'wp-content/themes/base_theme/functions-mod.php'
}
}
}
});
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task(s).
grunt.registerTask('default', ['concat']);
};
My package.json is the following (I know I'm not using jshint or uglify as of yet in my grunt.js, I am just testing one at a time).
{
"name": "base_theme",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "~1.0.0",
"grunt-contrib-jshint": "~0.8.0",
"grunt-contrib-uglify": "~0.2.7"
}
}
I've tried reading through the documentation on grunt's website, but either I"m not understanding something correctly, or I am just doing something completely wrong
Your config for Gruntfile.js is almost correct.
To fix it, simply avoid nesting src and dest in a dist object for both the js and php targets. For example:
Updated Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
options: {
separator: 'rn'
},
//dist: { <-- REMOVE the 'dist' object.
src: [
// Comment or uncomment any Bootstrap JS files
// you will not be using
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/alert.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/button.js',
'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/carousel.js'
// ...
],
dest: 'wp-content/themes/base_theme/assets/js/required/bootstrap/bootstrap.min.js'
},
php: {
options: {
stripBanners: true,
separator: '\n?>\n',
},
//dist: { <-- REMOVE the 'dist' object here too.
src: [
// To create a new location, follow pattern below
// Comment out what you don't need a re-concat
'wp-content/themes/base_theme/assets/functions/basic.php',
'wp-content/themes/base_theme/inc/custom-header.php',
'wp-content/themes/base_theme/inc/customizer.php'
// ...
],
dest: 'wp-content/themes/base_theme/functions-mod.php'
}
}
});
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task(s).
grunt.registerTask('default', ['concat']);
};
Further info:
Take a look at the example config for multiple-targets in the grunt-contrib-concat documentation and Task Configuration and Targets in the grunt documentation for further info.
Note: If you encounter any issues when you uglify the concatenated resultant files you may need to include a semicolon in your separator values. See here for more info. It reads:
Concatenated files will be joined on this string. If you're post-processing concatenated JavaScript files with a minifier, you may need to use a semicolon ';\n' as the separator.

Grunt "copy" noProcess option is not working?

It's look like noProcess option is ignored in my init settings for "copy" plugin.
Any one knows why this is happening ? I dont get any errors but the source folder/files (src/source/**) that it suppose to be ignored is copied over to destiantion folder.
Those are my settings in the init function:
copy: {
options: {
noProcess: ["!src/source/**"]
},
prod: {
files: [
{
expand: true,
src: ['src/**'],
dest: 'build/'
}
]
}
}
Definition
grunt.loadNpmTasks('grunt-contrib-copy');
Call:
grunt.registerTask("prod", ["concat", "uglify", "htmlmin", "imagemin", "copy"]);
Anyone see the problem or whats more important a solution ?
It looks like this setting does the job. But still, I do not understand how the noProcess option should be used to work as expected.
copy: {
prod: {
files: [
{
expand: true,
src: ['src/**', '!src/source/**/*', '!src/source'],
dest: 'build/'
}
]
}
}

Grunt uglify. How to minify and replace original file with result?

We're using grunt for dev and prod. For dev we don't perform uglify but for prod we do. Unfortunately I can't change references to script from something like this "script.js" to "script.min.js".
I've tried grunt task like this for prod environment but it is not work:
// uglify
uglify: {
options: {
drop_console: true
},
componet: {
src: [componet.path + 'script.js'],
dest: componet.path + 'script.js'
},
}
What is the best workflow to change content "script.js" with uglified version?
Try with this:
uglify: {
options: {
},
main: {
files: [{
expand: true,
src: ['yourpath/**/*.js'],
dest: ''
}]
}
}
There are different possibilities to define the grunt task, here some examples:
uglify: {
options: {
drop_console: true
},
componet: {
files: [
// map one to one
{ 'path/to/minimized01.min.js': 'path/to/source01.js' },
{ 'path/to/minimized02.min.js': 'path/to/source02.js' },
// concat several sources into a minimized destination
{ 'path/to/minimized03and04.min.js': [ 'path/to/source03.js', 'path/to/source04.js' ]},
// map all files in a folder, one to one into a destination
{ expand: true,
cwd: 'path/to/a/source/folder',
src: [ '**/*.js', '!excludeThisFile.js' ],
dest: 'path/to/a/destination/folder',
ext: 'min.js' // if you want to change each extension to min.js
}
]
}
}
And then you can run it as grunt uglify:component... I always set separate tasks for development and production, for development I'd suggest using uglify, without dropping console, and use beautify option... Even better if you use source mapping, its very useful for debugging in browsers.

Grunt Watch Event with Grunt Copy for Only Changed Files

Okay I've been stuck on this for 2 weeks, so hopefully someone else here has run across this problem. I'm trying to use Grunt to copy only files that have changed. I've seen numerous examples of how to do this with JSLINT and UGLIFY but no specific examples on how to do this with grunt-contrib-copy.
When you register a watch event and pass the filename to the copy subtask, the file name is accessible (i'm logging it out), but the file never copies over properly.
I'm hoping its a simple thing that i'm overlooking. Could someone please have a look at my code and see what I'm doing wrong?
//Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
base: 'app',
dist: 'dist',
},
copy: {
changedFiles: {
expand: true,
dot: true,
cwd: '<%= options.base %>',
src: ['**/*.*'],
dest: '<%= options.dist %>/'
}
},
watch: {
options: {
nospawn: true,
//debounceDelay: 1000,
},
css: {
files: ['app/css/*.css',
'app/js/*.js'
],
tasks: ['copy:changedFiles'],
}
}
});
grunt.event.on('watch', function(action, filepath, target){
grunt.log.writeln('target: ', target + '\n filepath: ' + filepath + '\n action: has ' + action);
grunt.config('copy.changedFiles.src', new Array(filepath) );
});
//load our copy task
grunt.loadNpmTasks('grunt-contrib-copy');
//load our watch task
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('copyChangedFiles', [
'watch:css'
]);
};
Basically my folder setup is as such:
-app
| - css
| - js
-dist
I'm watching the app folder and trying to copy files that change in the app directory and copy them to the dist directory. Dynamically modifying the copy src doesn't seem to be working.
The copy task when run by itself with watch and not on the watch event works just fine and copies every file over, but I'm interested in copying only files that change.
I've also tried a variation of this within my watch event, to no avail:
var copyDest = filepath.replace(grunt.config('copy.changedFiles.dest'), '');
var copyCwd = filepath.replace(grunt.config('copy.changedFiles.cwd'), '');
grunt.config('copy.changedFiles.cwd' , copyCwd);
grunt.config(['copy', 'changedFiles', 'src'] , [filepath]);
Has anyone ever successfully done this before using grunt copy? Or is there another task I should be using? I've tried the same with grunt-sync and that didn't seem to work either. I'm stuck.
Thanks for the help.
You should be able to use the grunt-newer package. The only thing I have noticed about this is that it doesn't do the delete action if the files are removed from the source and are currently in the destination of the copy.
However, for most purposes this should perform the task that you are looking for. Watch will be triggered on a file change, newer will only run if the files in destination are older than the src.
Note: nospawn is deprecated, and is now spawn. It was left for backwards compatibility.
I'm not sure it makes sense for files: [<pattern>] to not match the src pattern described in the copy task.
module.exports = function(grunt) {
grunt.initConfig({
options: {
base: 'app',
dist: 'dist',
},
copy: {
changedFiles: {
expand: true,
dot: true,
cwd: '<%= options.base %>',
src: ['**/*.*'],
dest: '<%= options.dist %>/'
}
},
watch: {
options: {
//nospawn is depricated but kept for compatibility. use spawn false instead
spawn: false,
cwd: '<%= options.base %>'
//debounceDelay: 1000,
},
css: {
//should match above
files: ['**/*.*'],
//On new file detection run copy:changedFiles
tasks: ['newer:copy:changedFiles']
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('copyChangedFiles', ['watch:css']);
};
I was able to use this SO answer: How to modify grunt watch tasks based on the file changed? and modify it to suit my needs. I'm now able to copy only the files that changed.
My watch now looks like this:
var path = require('path');
grunt.event.on('watch', function(action, filepath, target){
grunt.log.writeln(target + ': ' + filepath + ' might have ' + action);
var siteDirectory = path.dirname(filepath);
//changes changed file source to that of the changed file
var option = 'copy.changedFiles.src';
var result = filepath;
grunt.log.writeln(option + ' changed to ' + result);
grunt.config(option, result);
//customizes output directory so that file goes to correct place
option = 'copy.changedFiles.dest';
result = path.resolve(__dirname + '/dist');
grunt.log.writeln(option + ' changed to ' + result);
grunt.config(option, result);
});
Now running grunt copyChangedFiles will watch the app directory for changes, and any time a *.css or *.js file is modified, it will copy it over to the dist directory.
I really hope this helps someone else since I spent two weeks getting this to work properly.

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.

Resources