Develop Reference

Gruntfile task is not running properly

When I run grunt command on my terminal, the concat taks doesn't create the concat/form.js, and I need it to minify the javascript code.
I have the next directory structure:
src/entry/form.js
src/form/simple-form.js
This is my Gruntfile.js ,
Is anything wrong with that?
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
form: {
options: {
separator: ''
},
dist: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
}
},
uglify:{
form:{
options: {
sourceMap: true,
souceMapIncludeSources: true
},
dist: {
files: {
'dist/test.min.js' : ['concat/form.js']
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat:form', 'uglify:form']);
};
Final Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ''
},
form: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
},
uglify:{
options: {
sourceMap: true,
souceMapIncludeSources: true
},
form: {
files: {
'dist/test.min.js' : ['concat/form.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat', 'uglify']);
};

You use form and dist in the same time when probably it is a mistake. You should reduce this
concat: {
form: {
options: {
separator: ''
},
dist: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
}
},
to this
concat: {
options: {
separator: ''
},
form: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
},
See the examples how it should be done here

grunt-autoprefixer setup

i'm very new to grunt (and npm in general) so forgive me if I've missed something glaringly obvious!
I'm trying to set up my gruntfile (which has been working just fine before I started this particular challenge) to use the autoprefixer plugin, I followed the instructions on this blog http://grunt-tasks.com/autoprefixer/ but I'm receiving this error when i try and initialize grunt :
$ grunt
Running "postcss:dist" (postcss) task
Warning: Cannot read property 'postcss' of undefined Use --force to continue.
Aborted due to warnings.
And here is my gruntfile :
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
var autoprefixer = require('autoprefixer-core');
require('load-grunt-tasks')(grunt);
grunt.initConfig ({
uglify: {
my_target: {
files: {
'_/js/script.js' : ['_/components/js/*.js']
} //files
} //my_target
}, //uglify
compass: {
dev: {
options: {
config: 'config.rb'
} //options
}//dev
}, //compass
watch: {
options: {livereload: true},
scripts: {
files: ['_/components/js/*.js'],
tasks: ['uglify']
}, //script
sass: {
files: ['_/components/sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.html'],
}
}, //watch
postcss: {
options: {
processors: [
autoprefixer({
browers: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
}).postcss
]
},
dist: {
files: {
'_/css/styles.css': '_/components/sass/*.scss'
}
}
}
}); //initConfig
grunt.registerTask('default', 'watch', ['postcss']);
} //exports
Am I missing something? (it's blatantly something stupid like a misplaced comma isnt it!!)
Thanks In advance

Ok so if anyone happens to stumble across this and has a similar problem here is my gruntfile that shows how i fixed the problem.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig ({
uglify: {
my_target: {
files: {
'_/js/script.js' : ['_/components/js/*.js']
} //files
} //my_target
}, //uglify
compass: {
dev: {
options: {
config: 'config.rb'
} //options
}//dev
}, //compass
watch: {
options: {livereload: true},
scripts: {
files: ['_/components/js/*.js'],
tasks: ['uglify']
}, //script
sass: {
files: ['_/components/sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.html'],
}
}, //watch
postcss: {
options: {
map: true,
processors: [
require('autoprefixer-core')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: '_/css/*.css'
}
}
}); //initConfig
grunt.registerTask('default', 'watch', ['postcss:dist']);
} //exports

Incredible annoying behavior with GRUNT

We're using Mean.io for a project and getting erratic behavior from Grunt.
When we make changes on different files (while Grunt is running, of course), Grunt may detect the changes or not. HTML changes are usually detected by Grunt, but CSS/JS changes not.
And even worst, we often have to reboot (CTRL+C, grunt -f) Grunt to make it displays the project correctly because it prints random errors that actually don't exist. And thus the page is not displayed correctly in the browser.
For instance:
/vagrant/vavel/node_modules/dependable/index.js:115
throw new Error("dependency '" + name + "' was not registered");
^
Error: dependency 'access' was not registered
Or:
/vagrant/vavel/node_modules/mongoose/lib/index.js:323
throw new mongoose.Error.MissingSchemaError(name);
^
MissingSchemaError: Schema hasn't been registered for model "User".
Use mongoose.model(name, schema)
These errors just disappear if we restart Grunt again (using "rs" or CTRL+C + grunt -f).
In fact, sometimes there is not any error displayed in console and the page doesn't show up well.
Are we doing something wrong with ow we are using Grunt?
Gruntfile.js
cat Gruntfile.js
'use strict';
var paths = {
js: ['*.js', 'test/**/*.js', '!test/coverage/**', '!bower_components/**', 'packages/**/*.js', '!packages/**/node_modules/**'],
html: ['packages/**/public/**/views/**', 'packages/**/server/views/**'],
css: ['!bower_components/**', 'packages/**/public/**/css/*.css']
};
module.exports = function(grunt) {
if (process.env.NODE_ENV !== 'production') {
require('time-grunt')(grunt);
}
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assets: grunt.file.readJSON('config/assets.json'),
clean: ['bower_components/build'],
watch: {
js: {
files: paths.js,
tasks: ['jshint'],
options: {
livereload: true
}
},
html: {
files: paths.html,
options: {
livereload: true,
interval: 500
}
},
css: {
files: paths.css,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: paths.js,
options: {
jshintrc: true
}
}
},
uglify: {
core: {
options: {
mangle: false
},
files: '<%= assets.core.js %>'
}
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
src: paths.css
},
cssmin: {
core: {
files: '<%= assets.core.css %>'
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
args: [],
ignore: ['node_modules/**'],
ext: 'js,html',
nodeArgs: ['--debug'],
delayTime: 1,
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: [
'server.js',
function() {
require('meanio/lib/util').preload(__dirname + '/packages/**/server', 'model');
}
]
},
src: ['packages/**/server/tests/**/*.js']
},
env: {
test: {
NODE_ENV: 'test'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
//Load NPM tasks
require('load-grunt-tasks')(grunt);
//Default task(s).
if (process.env.NODE_ENV === 'production') {
grunt.registerTask('default', ['clean', 'cssmin', 'uglify', 'concurrent']);
} else {
grunt.registerTask('default', ['clean', 'jshint', 'csslint', 'concurrent']);
}
//Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
// For Heroku users only.
// Docs: https://github.com/linnovate/mean/wiki/Deploying-on-Heroku
grunt.registerTask('heroku:production', ['cssmin', 'uglify']);
};

Using grunt-contrib-watch to concat css files after compiling them using sass

I'd like to use grunt-contrib-watch to watch my .scss files, compile them and then concatenate them. Right now since I am watching .scss and .css files the changes to my .scss files kick off the task and then the .css changes restart the task and it gets stuck in a loop. How can I order the tasks such that 'concat' will run after 'sass'?
module.exports = function(grunt) {
grunt.initConfig ({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
css: {
src: ['src/css/reset.css', 'src/css/syntax.css', 'src/css/main.css'],
dest: 'dest/css/built.css'
}
},
sass : {
dist: {
files: {
'src/css/main.css' : 'src/css/main.scss'
}
}
},
watch : {
files: ['src/css/*.scss', 'src/css/*.css'],
tasks: ['sass', 'concat'],
options: {}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass', 'concat']);
};

// Before generating any new files, remove any previously-created -
grunt.loadTasks('grunt-contrib-clean');
`clean: {
test: [
'tmp',
'.sass-cache'
]
},
// Configuration to be run (and then tested).
grunt.loadTasks('node_modules/grunt-contrib-compass/tasks');
`compass: {
dist: { // Target
options: { // Target options
sassDir: '',
},
dev: { // Target
options: { // Target options
sassDir: '',
}
}`
// cssmin to compress & combine css files
grunt.loadTasks('node_modules/grunt-contrib-cssmin/tasks');
cssmin: {
compress: {
files: {
'<%= project.css %>/main_combined.css': [
'<%= project.css %>/tv-carousels.css',
'<%= project.css %>/tv-global.css']
}
}
}
and then add watch
grunt.loadTasks('grunt-contrib-watch');

I have the same question before reading the post http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/
try this
grunt.initConfig ({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
css: {
src: ['src/css/reset.css', 'src/css/syntax.css', 'src/css/main.css'],
dest: 'dest/css/built.css'
}
},
sass : {
dist: {
files: {
'src/css/main.css' : 'src/css/main.scss'
}
}
},
watch :
css:{
files: ['src/css/*.scss'],
tasks: ['buildcss']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('buildcss', ['sass', 'concat']);
then run grunt watch

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'
}]
}
}
});
};