I'm trying to get one of my SAPUI5 apps minified on the Fiori launchpad. But I'm facing some troubles. My minified files seem to be going in a 'tmp' folder and are not seen in the Fiori launchpad. I do get some dbg files, but next to the normal files which aren't minified. So the minified files are not used, but the normal files are. I do have a minified component preload. Anyone have any advise on what I'm doing wrong?
This is my gruntfile.js, I'm using at the moment:
module.exports = function (grunt) {
'use strict';
// Project configuration.
grunt.initConfig({
uglify: {
options: {
mangle: true,
compress: {
drop_console: true,
dead_code: false,
unused: false
}
},
files: {
expand: true,
cwd: "<%= ref.staging%>",
src: ["**/*.js", '!test/**', '!test_local.html'],
dest: "<%= ref.process%>"
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('#sap/grunt-sapui5-bestpractice-build');
grunt.registerTask('default', [
'lint',
'clean',
'build',
'uglify'
]);
};
The build task from grunt-sapui5-bestpractice-build usually generates a Component-preload.js file inside your Dist folder. Which is in fact a minified version of your application. If you deploy the application to the FLP with a Component-preload.js present it loads this instead of all the single files.
Related
With the Grunt code and folder structure as can be seen below, when I run grunt uglify , the result is that the output creates subfolder structure \js\src within \min folder, where the deepest folder (src) will contain the minified files. But I want the minified files to be created in the \min folder root.
If I set the dest parameter value to empty:``, the files are created in the same folder as the src folder.
If I set the dest parameter value to :/ or /js/min or /js/min/, nothing is created.
How can I generate the minified files directly in the root of the min folder?
module.exports = function(grunt){ // 1
grunt.initConfig({
uglify: {
my_target: {
files: [{
expand: true,
src: 'js/src/*.js',
dest: 'js/min/',
ext : '.min.js',
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); //https://www.npmjs.com/package/grunt-contrib-uglify
grunt.registerTask('default', function() { // 4
grunt.log.writeln('Hello, from the default grunt task!'); // 5
});
}
The Grunt documentation has a relevant section about building the files object dynamically.
Of particular interest is the "cwd" property:
All src matches are relative to (but don't include) this path.
This will allow us to remove the unwanted path from our "src" value by setting it as the value of "cwd". This will mean that the generated source file paths will not have the unwanted prefix ("/js/src/") when they are added to the /js/min folder.
Our resulting Grunt file looks as follows:
module.exports = function (grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: [{
expand: true,
cwd: 'js/src/',
src: '*.js',
dest: 'js/min/',
ext : '.min.js',
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
I'm having trouble using grunt-contrib-imagemin, insofar as I can't get it to compress any images.
Here's my Gruntfile.js
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/{base,global,medium,large}.css', // All CSS in the CSS folder
],
dest: 'css/build/production.css',
}
},
cssmin: {
build: {
src: 'css/build/production.css',
dest: 'css/build/production.min.css'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'if3/images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build'
}]
}
}
});
// 3. 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-imagemin');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'cssmin', 'imagemin']);
}
When I run grunt from the command line, each of concat and cssmin run fine, whereas imagemin - although running without errors - returns the following message.
Running "imagemin:dynamic" (imagemin) task
Minified 0 images (saved 0 B)
For info, my folder structure is as follows.
if3\
css\
*.css
images\
*.png
*.jpg
js\
*.js
node_modules\
etc.
Gruntfile.js
package.json
*.html
The image folder currently contains 7 PNG and 2 JPG files, but I can't figure out why it's not doing anything with them.
Any help much appreciated.
Thanks
your src-properties in your concat and cssmin tasks do not contain if3. your imagemin config does. removing that should probably help...
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build'
}]
}
}
you don't need use: dynamic {} or static {} and will works perfect.
see: Grunt imagemin running but not minifying
I am trying to achieve a smooth workflow.
my problem:
My JS modifications are shown and minified and the live reload works fine. When I make changes to my SCSS files they do not run under the run command:
grunt
or the grunt plugin:
grunt watch
It only works when I invoke:
grunt sass
This was the output from the 'grunt sass' console window:
Macintosh:grunt-test Neil$ grunt sass
Running "sass:dist" (sass) task
File "css/global.css" created.
Done, without errors.
Notes:
When I run 'grunt watch' on a sass file I have noticed that grunt runs the minification on the javascript for no reason. Surely this be invoked when that file or one of its dependencies is effected?
Gruntfile.js Contents:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
files: ['css/*.css'],
livereload: true
},
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
scripts: {
files: ['js/*.js', 'scss/*.scss'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
expand: true,
cwd: 'scss/',
src: ['*.scss'],
dest: 'css/',
ext: '.css'
}
},
concat: {
// 2. Configuration for concatinating files goes here.
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/global.js' // This specific file
],
dest: 'js/build/production.js',
}
},
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images-lossy/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/'
}]
},
png: {
options: {
optimizationLevel: 7
}
},
jpg: {
options: {
progressive: true
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
// CONCATENATION PLUGIN
grunt.loadNpmTasks('grunt-contrib-concat');
// MINIFY PLUGIN
grunt.loadNpmTasks('grunt-contrib-uglify');
// IMG CRUSH PLUGIN
grunt.loadNpmTasks('grunt-contrib-imagemin');
// GRUNT WATCH PLUGIN
grunt.loadNpmTasks('grunt-contrib-watch');
// SASS LIBARY PLUGIN
grunt.loadNpmTasks('grunt-contrib-sass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['sass','concat', 'uglify', 'imagemin', 'watch']);
};
I hope the above information helps. I have previously used Codekit, and it a really great app. I want to move to grunt but maybe my configuration file is incorrect I am close.
Any help would be greatly appreciated.
Neil
It looks like both of your issues occur within the watch configuration.
First, the reason the SASS task isn't working during watch is due to the files entry pointing to the wrong location. Your current files entry points to the "css" folder, but it should point to the "scss" folder, according to what you've specified in the actual "sass" task. In other words, your entry should be: files: ['scss/*.scss'].
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
Second, the JavaScript minification occurs during the watch whenever a SASS file changes because you have it listed here:
scripts: {
files: ['js/*.js', 'scss/*.scss'], // <-- scss is covered here
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
}
Change it to files: ['js/*.js'], instead to have the watch task kick in for JavaScript files only.
Once you address those issues, if things are slightly working you might want to expand the patterns so that it covers all files in the subdirectories for your JavaScript, CSS, SASS, etc. For example, js/*.js includes all .js files under the js folder, while js/**/*.js covers the js folder and its subfolders. You can read more under the GruntJS "globbing patterns" documentation.
EDIT: here's how the updated watch should look like...
watch: {
options: {
livereload: true
},
// css is really for Sass
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
// scripts will detect js changes
scripts: {
files: ['js/**/*.js'],
tasks: ['jshint', 'concat', 'uglify'],
options: {
spawn: false,
}
}
},
As mentioned, your individual tasks might need to use the ** pattern similar to what I've done with the "scripts" entry above: js/**/*.js
I have installed grunt-cli,grunt(local),grunt-init. Below is the simple grunt file to minify javascript files in source folder.
module.exports = function (grunt) {
grunt.initConfig({
min: {
dev: {
src: 'calculator/*.js',
dest: 'calculator.min.js'
}
}
});
};
when I run grunt, it does nothing, nor it gives any message out. nor does grunt --help or grunt --version..none of them seem to say anything. but if I dont' have grunt.js file it does complain about the grunt file not existing and help gives the details..
What you need to do is add a task that then calls min. To get it to run by just using grunt you must call this task default.
If you call it anything else (e.g. development, you must run grunt development)
You also need to make sure you have the necessary dependencies installed with npm. So min you probably want to minify JS with the gruntjs uglify module.
From the docs:
Install this plugin with this command:
npm install
grunt-contrib-uglify --save-dev
Once the plugin has been installed,
it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-contrib-uglify');
For example, here are some snippets from one of my Gruntfile.js
module.exports = function (grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// configurable paths
var yeomanConfig = {
app: 'resources',
dist: 'dist'
};
grunt.initConfig({
yeoman: yeomanConfig,
uglify: {
dist: {
files: {
'<%= yeoman.dist %>/js/scripts.js': [
'<%= yeoman.app %>/js/lib/*.js'
],
'<%= yeoman.dist %>/js/output.js': [
'<%= yeoman.app %>/js/*.js'
],
}
}
},
});
grunt.registerTask('default', [
// 'jshint',
// 'test',
'uglify'
]);
The above sets up an uglify task and then the grunt.registerTask('default'.. part calls uglify when I run grunt.
The above was generated and used as part of the yeoman workflow.
Please forgive my grunt noobiness.
I have grunt 0.4 installed correctly and working, and I'm loving it.
I cannot understand however, why my default task always skips some sub-tasks, on the first time.
Here's the relevant part of Gruntfile:
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
main: {
files: [
{src: ['src/**'], dest: 'temp/'} // includes files in path and its subdirs
]
}
},
uglify: {
main: {
files: grunt.file.expandMapping(['temp/**/*.js', '!temp/**/*min.js'], './')
}
},
imagemin: {
main: {
files: grunt.file.expandMapping(['temp/**/*.png', 'temp/**/*.jpg'], './')
}
},
compress: {
main: {
options: {
archive: 'archive.zip'
},
files: [
{expand: true, cwd: 'temp/src/', src: ['**'], dest: './'} // makes all src relative to cwd
]
}
},
clean: ["temp", "archive.zip"]
});
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-clean');
// Default task(s).
grunt.registerTask('default', ['clean', 'copy', 'uglify', 'imagemin', 'compress']);
grunt.registerTask('test', ['clean', 'copy', 'uglify']);
On the first run of grunt, both uglify and imagemin tasks do not process (and output) anything. If I launch it again it all works fine. If I manually delete the "temp" folder and relauch grunt, uglify and imagemin do not do anything again.
Please help me finding what I am doing wrong.
Node is version 0.8.2, gruntcli 0.1.6, grunt 0.4.0
Thanks for reading
the reason for that, is that grunt.file.expandMapping (which you use in both tasks) is running when the gruntfile is loaded and NOT when the actual task is run. so files which are generated through other tasks will not be availableto your imagemin/uglify-task.
you should use the files-object the same-way you do in your other tasks!