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']);
};
Related
Grunt should concatenate both my css and jQuery so I used this code:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
jquery: {
files: ['jquerytest/**/*.js'],
tasks: ['concat:js']
},
css: {
files: ['css/*.css'],
tasks: ['concat:css3']
},
scss:{
files: ['csstest/*.scss'],
tasks: ['compass:dist']
}
},
concat: {
js : {
options: {
separator: ',\n',
banner: 'jQuery.fn.extend({',
footer: '});'
},
files: {
src: ['jquerytest/general/MyFunJqueryLibrary.js', 'jquerytest/general/MySetJqueryLibrary.js'],
dest: 'jquery/MyJqueryLibrary.js'
},
},
css3 : {
options: {
separator: '\n'
},
files: {
src: ['css/MyLibraryCss.css', 'css/MyLibraryScss.css'],
dest: 'css/css.css'
},
},
},
compass: {
dist: {
options: {
sassDir: 'csstest',
cssDir: 'css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('concatjs', ['concat:dist1', 'concat:dist2']);
grunt.registerTask('default', ['watch']);
};
When running the watch task I get this message:
File "css\MyLibraryCss.css" changed.
Running "concat:css3" (concat) task
but nothing happens. However, when using the jQuery concat task it works, the problem happens only when I use two tasks inside concat.
You have problem with registering task. The task 'concat:dist1' and 'concat:dist2' does not exists. Instead you have to write 'concat:js' and 'concat:css3'.
I have a grunt project and I am using sass and jade together. I want to have a task for sass when developing where the style would be expanded for troubleshooting and a task for when I 'finish' the project and then the style would be compressed. I am new to grunt and don't know how to do it.
My gruntfile
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
pretty: true,
nospawn: false
},
files: {
'index.html' : 'src/index.jade'
}
}
},
sass: {
dist: {
options: {
style: 'expanded',
nospawn: false
},
files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
},
watch: {
jade: {
files: 'src/**/*.jade',
tasks: ['jade']
},
css: {
files: 'src/sass/**/*.sass',
tasks: ['sass']
},
options: {
livereload: true,
nospawn: false
}
},
connect: {
server: {
options: {
port: 9000,
base: '.',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect', 'watch']);
};
To get compressed css instead of expanded, you would first need to make another sass-task (so within sass:{}), call it finish: for instance and change the compression setting.
It should look something like this:
finish: {
options: {
style: 'compressed',
nospawn: false
},
files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
Then after grunt.registerTask('default', ['connect', 'watch']);
you can add another task, ie finish that should like:
grunt.registerTask('finish', ['sass:finish']);
To run it you would type grunt finish on the command line.
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
I am trying to register a custom task that combines the connect and watch task on grunt, but it seems like it is just running the first element(task) of the array on the function grunt.registerTask. In this situation, it is just running the watch command, not the connect.
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: '8000',
protocol: 'http',
hostname: 'localhost',
base: 'app',
keepalive: true,
livereload: true,
open: true
}
}
},
wiredep: {
task: {
src: ['app/index.html'],
}
},
jshint: {
options: {
reporter: require('jshint-stylish'),
jshintrc: '.jshintrc'
},
all: [
'GruntFile.js',
'app/scripts/*',
'test/spec/*'
]
},
sass: {
dist: {
files: {
'app/stylesheets/main.css': 'app/sass/main.sass'
},
options: {
compass: true
}
}
},
watch: {
options: {
livereload: true
},
styles: {
files: ['app/sass/*.sass'],
tasks: ['sass'],
options: {
livereload: true
}
},
scripts: {
files: ['app/scripts/*.js', 'GruntFile.js'],
tasks: ['jshint'],
options: {
livereload: true
}
},
bower: {
files: ['bower.json'],
tasks: ['wiredep']
}
}
});
// ========================================================
// Loading npm tasks
// ========================================================
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// ========================================================
// Register npm tasks
// ========================================================
grunt.registerTask('default', ['connect', 'wiredep', 'jshint', 'sass', 'watch']);
grunt.registerTask('serve',['watch', 'connect:server']);
// ========================================================
};
How can I work this two tasks together with registerTask function?
I am running grunt-contrib-watch 0.6.1 and have included livereload blocks in my gruntfile.js. I also included livereload.js call in my html:
<script type="text/javascript" src="http://myste.com:35729/livereload.js"></script>
When I run the server using my dev env everything seems to start correctly.
grunt dev
Running "env:dev" (env) task
Running "concurrent:dev" (concurrent) task
Running "nodemon:dev" (nodemon) task
[nodemon] v1.2.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
Application Started on port 3000
When I make a change I can see the server reload in my ssh console, but livereload.js fails to load:
When I go to the port location where it should be http://myste.com:35729/livereload.js I get the standard "webpage not available" response. There also seems to be no server running on http://myste.com:35729/ at all.
I also include my gruntfile.js here for completeness
'use strict';
module.exports = function (grunt) {
var watchFiles = {
serverViews: ['app/views/**/*.*'],
serverJS: ['gruntfile.js', 'server.js', 'config/**/*.js', 'app/**/*.js'],
clientViews: ['public/views/**/*.html'],
clientJS: ['public/js/**/*.js'],
clientSASS: 'public/styles/sass/**/*.{scss,sass}',
clientCSS: ['public/styles/css/**/*.css']
};
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
env: {
dev: {
NODE_ENV: 'development'
},
prod: {
NODE_ENV: 'production'
}
},
watch: {
serverViews: {
files: watchFiles.serverViews,
options: {
livereload: true
}
},
serverJS: {
files: watchFiles.serverJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientViews: {
files: watchFiles.clientViews,
options: {
livereload: true,
}
},
clientJS: {
files: watchFiles.clientJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientSASS: {
files: watchFiles.clientSASS,
tasks: ['sass:dev'],
options: {
livereload: true,
spawn: false
}
},
clientCSS: {
files: watchFiles.clientCSS,
tasks: ['csslint'],
options: {
livereload: true
}
},
},
nodemon: {
dev: {
script: 'server.js'
}
},
nodeunit: {
dev: {
all: ['app/test/**/*_test.js'],
options: {
reporter: 'tap',
reporterOutput: 'tests.tap',
reporterOptions: {
output: 'outputdir'
}
}
}
},
jshint: {
dev: {
all: {
src: watchFiles.clientJS.concat(watchFiles.serverJS),
options: {
jshintrc: true
}
}
}
},
uglify: {
prod: {
my_target: {
files: {
'public/js/all.min.js': ['public/js/library/jquery.js', 'public/js/library/modernizr.js', 'public/js/library/selectivizr.js', 'public/js/library/delfin.js']
}
}
}
},
sass: {
dev: {
options: {
style: 'expanded'
},
files: {
'public/styles/css/style.css': 'public/styles/scss/style.scss' // 'destination': 'source'
}
}
},
cssmin: {
prod: {
files: {
'public/styles/css/style.min.css': 'public/styles/css/style.css'
}
}
},
csslint: {
dev: {
options: {
csslintrc: '.csslintrc',
},
all: {
src: watchFiles.clientCSS
}
}
},
concurrent: {
dev: {
target: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-env');
grunt.registerTask('dev', ['env:dev', 'concurrent', 'nodemon', 'watch', 'jshint', 'nodeunit', 'sass']);
grunt.registerTask('prod', ['env:prod', 'cssmin', 'uglify', 'nodemon']);
};
You try to run nodemon and watch tasks twice. First, when you run concurrent task and second when you call themselves.
Change your concurrent task config to
concurrent: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
},
And remove extra tasks from grunt dev declaration:
grunt.registerTask('dev', ['env:dev', 'concurrent', 'jshint', 'nodeunit', 'sass']);