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.
Related
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.
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 build a yeoman generator that uses the foundation-five gruntfile but the tasks are not found. Only the clean task is found.
Warning: Task "concurrent:server" not found. Use --force to continue
Related codes is here, how can I fix it?
I have run into similar issues when trying to 'reuse' a gruntfile.js. You may need to install the relevant grunt packages from npm - packages that grunt is relying upon, but have not actually been installed in your project. In this case, from your terminal, inside the project folder:
$ npm install grunt-concurrent
(https://www.npmjs.org/package/grunt-concurrent)
I was able to figure out how to apply the foundation 5 yeoman generator to my own. It took a little effort to figure out what files and other configurations were required. Apparently there is more to it than just trying to reuse a Gruntfile.js which does not surprise me since I am new to yeoman and grunt.
Here are some of the lines I added to my index.js
var spawn = require('child_process').spawn;
// setup the test-framework property, Gruntfile template will need this
this.testFramework = options['test-framework'] || 'mocha';
// for hooks to resolve on mocha by default
options['test-framework'] = this.testFramework;
// resolved to mocha by default (could be switched to jasmine for instance)
this.hookFor('test-framework', { as: 'app' });
skipMessage: options['skip-install-message']
var webappDir = 'src/main/webapp/html/';
this.template('_Gruntfile.js', webappDir + 'Gruntfile.js');
this.template('_package.json', webappDir + 'package.json');
this.copy('bowerrc', webappDir + '.bowerrc');
this.copy('_bower.json', webappDir + 'bower.json');
this.copy('jshintrc', webappDir + '.jshintrc');
this.copy('editorconfig', webappDir + '.editorconfig');
this.mkdir(webappDir + 'uat');
this.copy('_dalekjs-tests.js', webappDir + 'uat/dalekjs-tests.js');
this.indexFile = this.readFileAsString(path.join(this.sourceRoot(), 'index.html'));
this.indexFile = this.engine(this.indexFile, this);
this.directory('app', webappDir + 'app', true);
this.write(webappDir + 'app/index.html', this.indexFile);
Hopefully this is useful for someone coming along and trying to merge Foundation 5 yeoman generator code with their own generator.
First install all necessary grunt modules from the same folder where you have Gruntfile.js:
npm install grunt-concurrent grunt-nodemon --save-dev
Second, load this modules by defining in Gruntfile.js
...
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('default', [
'concurrent'
]);
Now you are ready to run the task:
grunt
Bellow you can see entire example of Gruntfile.js with watch, sass and nodemon that I have:
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
project: {
app: ['app'],
assets: ['assets'],
scss: ['<%= project.assets %>/sass/css'],
css: ['<%= project.assets %>/public/css']
},
sass: {
dev: {
options: {
style: 'expanded',
compass: false,
loadPath: 'bower_components'
},
files: {
'<%= project.css %>/style.css': '<%= project.scss %>/style.scss'
}
}
},
watch: {
sass: {
files: '<%= project.scss %>/{,*/}*.{scss,sass}',
tasks: ['sass:dev']
},
},
// watch our node server for changes
nodemon: {
dev: {
script: 'server.js'
}
},
// run watch and nodemon at the same time
concurrent: {
options: {
logConcurrentOutput: true
},
tasks: ['nodemon', 'watch']
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('default', [
'concurrent'
]);
};
Hi I'm new to grunt and I'm having a problem getting it up and running with compass.
This is my Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
pkg: grunt.file.readJSON('package.json'),
// Metadata.
meta: {
sassPath: 'templates/sass/',
cssPath: 'public/css/',
},
// Task configuration.
compass: {
dist: {
files: {
'<%= meta.cssPath %>*.css': '<%= meta.sassPath %>**/*.scss'
}
}
},
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-compass');
// Default task.
grunt.registerTask('default', ['compass']);
}
But when I run grunt --verbose I get this:
...
Running "default" task
Running "compass" task
Running "compass:dist" (compass) task
Verifying property compass.dist exists in config...OK
Files: templates/sass/ie.scss, templates/sass/print.scss, templates/sass/screen.scss, templates/sass/style.scss -> public/css/*.css
Options: (none)
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.
Done, without errors.
So it looks like it sees the files, and even sees where to put them... what is going wrong?
EDIT: Just so people know the final answer... I thought I had tried this before without success, but this morning I ended up getting this to work:
compass: {
dist: {
expand: true,
cwd: '<%= meta.scssPath %>',
src: ['{,*/}*.scss'],
dest: '<%= meta.cssPath %>',
ext: '.css'
}
},
EDIT 2: Okay, for the life of me don't know why, but it only works when a config.rb was present... why would grunt use the compass config is another question...
I think the issue is your destination file. You have to specify an actual file, not *.css. Try tweaking your config slightly:
compass: {
dist: {
files: {
'<%= meta.cssPath %>compiled.css': '<%= meta.sassPath %>**/*.scss'
}
}
}
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!