Grunt - not able to minifiy js file - javascript

I am running grunt on my app to jshinting and minification, In which jshint is working but the minification command not working at all. getting error like this:
D:\grunt>grunt min
Warning: Task "min" not found. Use --force to continue.
Aborted due to warnings.
here is my config file:
module.exports = function(grunt){
// Project configuration.
grunt.initConfig({
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
myFiles: ['js/**/*.js']
},
min:{
dest : {
src:'js/app.js',
dest:'js/app.min.js'
}
},
});
// Each plugin must be loaded following this pattern
grunt.loadNpmTasks('grunt-contrib-jshint');
}
In this project I have the modules installed is :
grunt, grunt-contrib-jshint, jshint - I don't know the wrong what i do..
Any one help me to figure-out the issue please.
thanks in advance!

To minify files you need, for example, uglify.
Install it with this command:
npm install grunt-contrib-uglify --save-dev
Then, add it in your Gruntfile
grunt.loadNpmTasks('grunt-contrib-uglify');
Finally, you have to change the code of your Gruntfile:
grunt.initConfig({
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
myFiles: ['js/**/*.js']
},
uglify:{
dest : {
files: {
'js/app.min.js': ['js/app.js']
}
}
},
});
Regards.

You need to install a minify task like
grunt-contrib-uglify
in order to minify the files.
More on Grunt-contrib-uglify
Sample Grunt File using uglify

Related

Referencing a module / script when using npm and grunt

I'm looking into npm, grunt and bower, and I've made my first task which looks like this.
module.exports = function(grunt){
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['node_modules/jquery/dist/jquery.js', 'node_modules/handlebars/dist/handlebars.js'],
dest: 'dist/scripts.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
I was wondering if there's an easier/better way of adding the scripts. So that instead of typing the whole path you could just do src: [jquery, 'handlebars'],
and if bower is of any use regarding this?
Thank you.

Grunt notify not running

I am trying to get desktop notifications working with Grunt, and have installed Grunt notify. As per the instructions, I have also installed "Growl" (I'm on Windows 7), and also included the line grunt.loadNpmTasks('grunt-notify'); in my Gruntfile, however desktop notifications are not showing at all.
Am I missing something? The Grunt Notify page seems to imply that adding in the loadNpmTasks line is the only addition needed in my gruntfile for it to work with default options.
Here is my Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
less: {
development: {
options: {
paths: ["less"],
compress: true,
strictMath: true,
sourceMap: false,
sourceMapFilename: 'css/styles.css.map',
sourceMapRootpath: '/'
},
files: {
"css/styles.css": "css/style.less"
}
}
},
uglify: {
my_target: {
files: {
'js/custom.min.js': ['js/custom.js']
}
}
},
watch: {
compile: {
files: ['**/*.php', 'css/**/*.less', 'js/**/*.js', '!js/custom.min.js'],
tasks: ['less', 'uglify'],
options: {
atBegin: true,
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-notify');
// Default task(s).
grunt.registerTask('default', ['less']);
};
Hum... I never used the grunt-notify plugin, but as the doc says, this plugin shows warning or errors of your tasks. So if your task run successfully, you shouldn't be notified.
If you wan't custom messages on success too, you'll have to add the optionnal messages.
To be sure that the problem isn't an effect of a bad installation, try to run the simple gruntfile shown as example on the plugin's page.
If it works, you should consider my first explanation and add a custom message on success.
[Edit: try to run your task with the attribute -v to have a verbose run. As specified in the doc, it will write logs if there is errors with the plugin]
This is the grunt-notify example file (from the plugin's doc) :
grunt.initConfig({
// This is optional!
notify_hooks: {
options: {
enabled: true,
max_jshint_notifications: 5, // maximum number of notifications from jshint output
title: "Project Name", // defaults to the name in package.json, or will use project directory's name
success: false, // whether successful grunt executions should be notified automatically
duration: 3 // the duration of notification in seconds, for `notify-send only
}
}
});
// Load the task
grunt.loadNpmTasks('grunt-notify');
// This is required if you use any options.
grunt.task.run('notify_hooks');

Grunt server error, EMFILE

Whenever I do "grunt server" it automatically gives me this error:
Running "watch" task
Waiting...
Warning: EMFILE, too many open files
and next this:
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
This usual fix I've seen on the web is changing the name as shown bellow:
grunt.registerTask('uglify', ['jshint', 'uglify']);
grunt.registerTask('myuglify', ['jshint', 'uglify']);
Although my problem cannot be fixed with such method because I'm not using the same name as the task.
My gruntfile.js:
module.exports = function(grunt){
grunt.initConfig({
sass: {
dist: {
files: {
'styles/css/main.css': 'styles/sass/main.scss'
}
}
}
,watch: {
options:{livereload:true},
sass:{
files:'styles/sass/*.scss',
tasks:'sass'
}
},
express:{
all:{
options:{
port:9000,
hostname:'localhost',
bases:'.',
livereload:true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('default', ['sass'])
grunt.registerTask('server',['express','watch'])
}
Any idea?
I encountered this time-wasting error today, and the solution on the GitHub repository did not work for me. After searching for this issue in relation to the process.nextTick deprecation warning, I came to the conclusion that running a task dependent on a watched file/glob is a potential cause.
Here's the Gruntfile for my website:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
dev: {
files: ['**/*.js', 'public/stylesheets/**/*.scss'],
tasks: ['express:dev'],
options: {
spawn: false
}
}
},
express: {
dev: {
options: {
script: 'server.js',
node_env: 'development'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express-server');
grunt.registerTask('default', ['express:dev', 'watch']);
};
I resolved the issue by removing js files from my watch task, which restarts Express. The below configuration of the aforementioned task works fine for me:
watch: {
dev: {
files: ['public/stylesheets/**/*.scss'],
tasks: ['express:dev'],
options: {
spawn: false
}
}
},
This SO answer provides a similar fix. Interestingly, I've never encountered this problem on my Ubuntu machine; it happened on my MacBook today when I cloned my repository.
worked for me when i typed
sudo grunt serve
possibly another solution. just increase increase read file limit.
https://github.com/gruntjs/grunt-contrib-watch#how-do-i-fix-the-error-emfile-too-many-opened-files
ulimit -n 10480

Grunt-contrib-sass not working with compass

I'm new to Grunt, and am trying to configure grunt-contrib-sass to work alongside Compass.
I'm using the grunt-contrib-sass plugin, as I need to export my .scss files to two separate destinations and I couldn't get that to work with grunt-contrib-compass.
The problem that I'm having, is that on compile of .scss files I get 'ERROR: Cannot load compass' in the terminal.
Here's a copy of my gruntfile.js;
module.exports = function(grunt){
grunt.initConfig({
uglify: {
my_target: {
files: {
'wp-content/themes/mytheme/js/functions.js' : [ 'components/js/*.js' ]
}
}
}, // uglify
sass:{
dist:{
files: {
'wp-content/themes/mytheme/style.css' : 'components/sass/style.scss',
'wp-content/themes/mytheme/css/ie.css' : 'components/sass/ie.scss '
},
options: {
compass: true,
}
}
},
watch: {
scripts : {
files: ['components/js/*.js'],
tasks: ['uglify']
},
css: {
files: [ 'components/sass/*.scss'],
tasks: [ 'sass' ],
options: { livereload: true }
},
livereload: {
options: { livereload: true },
files: ['wp-content/themes/mytheme/'],
},
} // watch
})
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask( 'default', 'watch' );
} // exports
Thanks!
Grunt-contrib-sass doesn't support Compass versions less than v1.0.0 (which is in alpha at the time of writing).
After updating Compass with;
gem install compass --pre
everything appears to work fine on compilation. The same gruntfile.js was used as above.
Removing all versions of sass except of known working version 3.2.19 solved the problem for me.
$ sudo gem uninstall sass
Select gem to uninstall:
1. sass-3.2.3
2. sass-3.2.5
3. sass-3.2.19
4. sass-3.3.5
5. All versions
> 4
According to the grunt-contrib-compass github page you need to have Ruby, Sass and Compass installed as prerequisite. You are using grunt-contrib-sass instead of grunt-contrib-compass. See examples on the contrib-compass github.
I found another way to get compass to work without the ruby gem. (it is a bit of work though).
Go to https://github.com/Compass/compass and get the code.
Copy the contents of core/stylesheets/compass into your sass/scss folder. Now you can use the normal import-rules from the compass-website.
BUT:
You probably have to change some imports from compass like import "compass/support"; in _transitions.scss to import "../support";
grunt-contrib-sass perfectly works with compass, just add compass: true to options. I read this point on oficial git repository.
Example
sass: {
dist: {
options: {
style: 'expanded',
compass: true
},
files: [
{
expand: true,
cwd: 'ipa-framework/src/css/scss',
src: ['*.scss'],
dest: 'ipa-framework/src/css',
ext: '.css'
}
]
}
}
So none of the answers worked exactly for me but it did help me solve the issue.
When you install compass using
gem install compass --pre
it installs another version of sass, so dont install sass at all let the compass install do it for you.
So to get it to work
gem uninstall sass
gem install compass --pre
And for reference this is the npm libraries I needed to have to get this working
npm install -g grunt grunt-contrib-sass grunt-contrib-watch grunt-livereload sass grunt-contrib-cssmin grunt-contrib-compass

grunt: how to generate jshint output as HTML

I'm trying to run jshint using grunt. This works, but now I would like the output to be HTML. Here is my grunt file
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'src/*.js']
, options: {
//reporter: 'jslint'
reporter:'checkstyle'
, reporterOutput: 'jshint.html'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};
Running this grunt taks, the output is in XML. Any suggestion how to turn this into something that outputs HTML ?
Thanks a lot
You would need to write a custom reporter. Check the jshint docs on writing custom reporters: http://jshint.com/docs/reporters/ Then you can specify the path to the reporter with:
options: {
reporter: '/path/to/custom/html/reporter',
reporterOutput: 'jshint.html'
}
You can use jshint reporter from nodejs
This generates output in HTML
https://www.npmjs.com/package/jshint-html-reporter
Include this in your GruntFile.js
grunt.initConfig({
jshint: {
options: {
reporter: require('jshint-html-reporter'),
reporterOutput: 'jshint-report.html'
},
target: ['file.js']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jshint']);

Categories