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/'
}
]
}
}
Related
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.
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.
I have a simple browserify setup in my Gruntfile.js
browserify: {
dist: {
src: 'public/js/main.js',
dest: 'public/js/bundle.js'
}
}
But how can I access party of my code from the browser? It seems like the module is completely encapulated. But I need to access some methods from <script> tags in my output.
From the console this works browserify -s myExport public/js/main.js -o public/js/bundle.js
But I can't get grunt-browserify to execute that.
I ended up with this (working):
browserify: {
options: {
transform: [ require('grunt-react').browserify ],
browserifyOptions: {
debug: true,
standalone: 'myExport'
}
},
dev: {
src: 'public/js/main.js',
dest: 'public/js/bundle.js'
},
dist: {
src: 'public/js/main.js',
dest: 'public/js/bundle.js'
}
}
concat grabs all the htm pages and puts them into 1 which is /templates/min/production.htm
what i am trying to achieve is /templates/min/production.min.htm, i get no errors in terminal window... please let me know if you guys would like to know anything further
module.exports = function (grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
controlCss: {
src: ['UI.controls/assets/css/*.css'],
dest: 'UI.controls/assets/css/min/production.css'
},
controlJs: {
src: ['UI.controls/assets/js/*.js'],
dest: 'UI.controls/assets/js/min/production.js'
},
coreJs: {
src: ['UI.core/assets/js/*.js'],
dest: 'UI.core/assets/js/min/production.js'
}
,
controlHtml: {
src: ['UI.controls/assets/templates/*.htm'],
dest: 'UI.controls/assets/templates/min/production.htm'
}
},
cssmin: {
controlCss: {
src: 'UI.controls/assets/css/min/production.css',
dest: 'UI.controls/assets/css/min/production.min.css'
}
},
uglify: {
controlJs: {
src: 'UI.controls/assets/js/min/production.js',
dest: 'UI.controls/assets/js/min/production.min.js'
},
coreJs: {
src: 'UI.core/assets/js/min/production.js',
dest: 'UI.core/assets/js/min/production.min.js'
}
},
htmlmin: {
controlHtml: {
options: {
removeComments: true,
collapseWhitespace: true
},
expand: true,
cwd: 'expand',
src: 'UI.controls/assets/templates/min/production.htm',
dest: 'UI.controls/assets/templates/min/production.min.htm'
}
}
});
// 2. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// 3. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'cssmin', 'uglify', 'htmlmin']);
};
#mario this is running the code your way, and it seems to not find the source file... but i think its suppose to be destination: source... not source: destination.. i'm going to post the response i get when doing destination: source too
This is the response im getting in my terminal window while running the code as i posted above #mario
]4
#mario it seems to be freezing on reading the production.htm :( appreciate your help
Is it anything to do with my grunt version? must i have version 4.0? i have 4.5.. should it still work?
also there are many other errors... any of them ring any bells into why my html is not minifying? Appreciate any help. Thanks in advance
According to htmlmin documentation, you have to write the task like this:
htmlmin: {
controlHtml: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'UI.controls/assets/templates/min/production.htm': 'UI.controls/assets/templates/min/production.min.htm'
}
}
}
Hope it helps.
Regards.
I have a directory structure as follows:
source/
libraries/
d3.js
lodash.js
//etc
I have grunt-copy setup as follows:
copy: {
main: {
files: [
{
src: ["source/libraries/*.js"],
dest: "build/",
flatten: true
}
I expect it to flatten the output into build, so that I will have
build/
d3.js
//etc
Instead, I get a reproduction of the original directory structure in build:
build/
source/
libraries/
d3.js
//etc
What gives? Am I not using flatten properly?
Well, if you're only using flatten because you want everything in source/libraries to go into build, I would suggest actually using the cwd (current working directory) option instead. If, on the other hand, you actually have subfolders in source/libraries then you probably want that src line to be source/libraries/**/*.js.
In any case, if you can use cwd instead it would look like this:
copy: {
main: {
files: [
{
src: ["*.js"],
dest: "build/",
cwd: "source/libraries/"
}
]
}
For the other case, maybe this? (Notice the expand option set to true)
copy: {
main: {
files: [
{
src: ["source/libraries/**/*.js"],
dest: "build/",
flatten: true,
expand: true
}
]
}
}