Develop Reference

Grunt livereload Fatal error: listen EACCES

I've been spending the latter part of my day learning about how to create my own gruntfile and add the various tasks I want to it. All has gone well so far but I'm trying to add the live reload feature in grunt-contrib-watch and running into some problems.
My localhost is listening to port 9080 so after reading through the documentation https://github.com/gruntjs/grunt-contrib-watch#optionslivereload
I figured this would make sense?
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['*.js', 'scripts/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
files: ['gruntfile.js', '*.js', 'scripts/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"css/main.css": "less/*.less" // destination file and source file
}
}
},
watch: {
files: ['<%= jshint.files %>', 'less/**/*.less', '*.html', 'templates/**/*.html', 'data/**/*.json'],
tasks: ['jshint', 'less'],
options: {
livereload: {
host: 'localhost',
port: 9080
}
}
},
});
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'less', 'watch']);
};
I'm getting this error every time I try to save
Reloading watch config...
Running "watch" task
Waiting...
Fatal error: listen EACCES 127.0.0.1:9080
Can anyone shed any light on this?
Thanks

The error was being caused by WAMPServer, I didn't realise that watch creates it's own localhost.
Now I've just got to try and figure out how to get my site to appear on screen.
At the moment all that's being displayed is
{"tinylr":"Welcome","version":"0.2.1"}

Grunt, how to minify different folders (to include node_modules folder)

I am using NPM in a WP project.
I already have a grunt task that compiles my separate SCSS files into CSS files and then minifies them into one default.min.css file when running grunt (that's good.)
My main issue is that I would like to include different npm packages such as fontawesome, bootstrap etc. where they also would be minified into that one minified min.css file, together with my own files.
I would also like to know how to do this for my own *.js files uglify'd with different packages i'm using (jquery-ui, owl-carousel, etc.)
Please find below my Gruntfile.js, this is my first Gruntfile.js so feel free to include any constructive remarks.
Thanks,
Bud
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: 'resource/scss/',
src: ['*.scss'],
dest: 'resource/builds/css/',
ext: '.css'
}]
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass', 'cssmin']
},
scripts: {
files: 'resource/js/*.js',
tasks: ['uglify']
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'resource/builds/css/',
src: ['*.css', '!*.min.css'],
dest: 'public/css',
ext: '.min.css'
}]
}
},
concat: {
js: {
options: {
separator: ';'
},
src: 'resource/**/*.js',
dest: '<%= paths.dest.js %>'
}
},
uglify: {
build: {
files: [{
expand: true,
cwd: 'resource/js/',
src: '**/*.js',
dest: 'public/js',
ext: '.min.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['cssmin', 'uglify', 'watch']);
};

No 'Sass' Targets Found - Error whilst using Grunt

I've started trying to get to grips with the very basics of Grunt but when I try to run 'Grunt Sass' I get a "No 'sass' targets found" error. I can't see where I'm going wrong, anyone able to give me nudge in the right direction?
module.exports = function(grunt) {
//configuration
grunt.initConfig({
// pass in options to plugins, references to files
concat: {
js: {
src: ['js/*.js'],
dest: 'build/script.js'
},
css: {
src: ['css/*.css'],
dest: 'build/styles.css'
},
sass: {
dist: {
files: [{
src: 'css/sass/styles.scss',
dest: 'css/styles.css'
}]
}
},
}
});
//Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
// register tasks
grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('concat-css', ['concat:css']);
};

Your sass task is nested in concat which is why it can’t identify the sass task and is returning a No "sass" targets found. error.
Un-nest your sass task like such:
grunt.initConfig({
concat: {
...
},
sass: {
dist: {
files: [{
src: 'css/sass/styles.scss',
dest: 'css/styles.css'
}]
}
},
});
Sidenote: Looks like your css task is misplaced as well, but that shouldn’t affect grunt sass or grunt sass:dist from running; however, it will not find grunt sass:css. If you want both grunt sass:css and grunt sass:dist to be available, remove the css task from js and here’s how you should struct your sass task:
grunt.initConfig({
concat: {
js: {
src: ['js/*.js'],
dest: 'build/script.js'
},
},
sass: {
css: {
src: ['css/*.css'],
dest: 'build/styles.css'
},
dist: {
files: [{
src: 'css/sass/styles.scss',
dest: 'css/styles.css'
}]
}
},
});

Error on creating minified css with grunt-contrib-cssmin

I have an issue when I try to create minified css with grunt-contrib-cssmin.
SourceMaponcssmin.js` is set as false and I can't find why I keep getting this error message.
What should I do with this ./source-map/source-map-generator" error?
Error message
Loading "cssmin.js" tasks...ERROR
>> Error: Cannot find module './source-map/source-map-generator'
Gruntfile.js
grunt.initConfig({
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css',
src: ['*.css', '!*.min.css'],
dest: 'css',
ext: '.min.css'
}, {
expand: true,
cwd: 'css',
src: ['*.css', '!*.min.css'],
dest: 'mw/css/',
ext: '.min.css'
}]
}
},
watch: {
cleancss: {
files: ['*.css', '!*.min.css'],
tasks: 'cssmin'
},
},
});
// Load the plugin
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['watch']);

try to remove your node_modules folder and re-install your dependencies with npm install. And try to re-run your task

how to config grunt.js to minify files separately

there are some js files in static/js/
1. a.js
2. b.js
3. c.js
how to config grunt.js to get below files:
1. a.min.js
2. b.min.js
3. c.min.js
as far, I have to type specific file name:
min: {
dist: {
src: 'js/**/*.js',
dest: 'js/min/xxx.min.js'
}
}

Had the same problem and found a solution that would automatically minify all my scripts separately:
uglify: {
build: {
files: [{
expand: true,
src: '**/*.js',
dest: 'build/scripts',
cwd: 'app/scripts'
}]
}
}

In grunt 0.4 you can specify multiple dest/src pairs like this:
uglify: {
dist: {
files: {
'dist/main.js': 'src/main.js',
'dist/widget.js': 'src/widget.js'
}
}
}

Or you can use expandMapping, like this:
min: {
files: grunt.file.expandMapping(['path/*.js', 'path2/*.js'], 'destination/', {
rename: function(destBase, destPath) {
return destBase+destPath.replace('.js', '.min.js');
}
})
}
And the output:
path/test.js => destination/path/test.min.js
path2/foo.js => destination/path2/foo.min.js

This below gruntjs works for me for creating minified files for all the js files under a dir
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
files: [{
expand: true,
src: '**/*.js',
dest: 'build/scripts',
cwd: 'public_html/app',
ext: '.min.js'
}]
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};

From the grunt docs for min:
This task is a multi task, meaning that grunt will automatically
iterate over all min targets if a target is not specified.
So you can do this:
min: {
min_a: {
src: 'a.js',
dest: 'a.min.js'
},
min_b: {
src: 'b.js',
dest: 'b.min.js'
},
min_c: {
src: 'c.js',
dest: 'c.min.js'
}
There's nothing special about the name 'dist' for these tasks.

Use the ext option to name the files .min.js instead of .js
uglify: {
build: {
files: [{
expand: true,
src: '**/*.js',
dest: 'build/scripts',
cwd: 'app/scripts',
ext: '.min.js'
}]
}
}

For explicitly export some files into separate output files (in this case all.min.js and all.jquery.js) use:
uglify: {
js: {
files : {
'js/all.min.js' : [
'js/modernizr.js',
'js/vendor/modernizr-2.6.2-respond-1.1.0.min.js',
'js/bootstrap.min.js',
'js/main.js',
'js/ZeroClipboard.min.js',
'js/bootstrap-datepicker/bootstrap-datepicker.js'
],
'js/all.jquery.js' : [
'js/vendor/jquery-1.9.1.js',
'js/vendor/jquery-migrate-1.2.1.js',
'js/vendor/jquery-ui.js'
]
}
},
options: {
banner: '\n/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
preserveComments: 'some',
report: 'min'
}
},

I like to keep the original files and also create uglified ones:
uglify: {
dist: {
files: [{
expand: true,
src: '**/*.js',
dest: 'destdir',
cwd: 'srcdir',
rename: function(dest, src) { return dest + '/' + src.replace('.js', '.min.js'); }
}]
}
},

You also can use copy and grunt-mindirect.
copy: {
dist: {
src: 'a.js',
dest: 'a.min.js'
}
},
minidirect: {
all: 'js/min/*.min.js'
}
This should work.

I guess it only matters for watch tasks.
In grunt 0.4 you can do this
var filesA = 'a.js', filesB = 'b.js', filesC = 'c.js';
...
min: {
min_a: {
src: filesA,
dest: 'a.min.js'
},
min_b: {
src: filesB,
dest: 'b.min.js'
},
min_c: {
src: filesC,
dest: 'c.min.js'
}
watch: {
min_a: {
files: filesA,
tasks: ['min:min_a']
},
min_b: {
files: filesB,
tasks: ['min:min_b']
},
min_c: {
files: filesC,
tasks: ['min:min_c']
}
}
After that just start grunt watch and all will be fine automagically.

In an intention to help others who come to this page in future -
I came across a video which explains on how to minify JS files using Grunt JS here: https://www.youtube.com/watch?v=Gkv7pA0PMJQ
The source code is made available here: http://www.techcbt.com/Post/359/Grunt-JS/how-to-minify-uglify-javascript-files-using-grunt-js
Just in case, if the above links are not working:
You can minify all javascript files and combine/concat into one file using the following script:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
t1:{
files:{
'dest/all.min.js': ['src/app.js', 'src/one.js', 'src/t/two.js']
}
}
}
});
};
If you would like to have source maps also generated, you can enable "sourceMap" option as follows:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
t1:{
options : {
sourceMap : true,
},
files:{
'dest/all.min.js': ['src/app.js', 'src/one.js', 'src/t/two.js']
}
}
}
});
};
In order to retain entire folder structure while minifying JS files, you can use the following script:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
t1:{
files: [{
cwd: 'src/',
src: '**/*.js',
dest: 'dest/',
expand: true,
flatten: false,
ext: '.min.js'
}]
}
}
});
};