I am trying to minify a little angular script, but for some reason uglify just hangs indefinitely. JSHint runs fine and completes if I add it into the task list, and then it hangs on uglify.
Here is my Gruntfile:
module.exports = function (grunt) {
// Project configuration
grunt.initConfig({
// make node configuration available for use
pkg: grunt.file.readJSON('package.json'),
// configure uglify
uglify: {
options: {
mangle: false
},
my_target: {
dist: {'dist/test.min.js': ['src/test.js']}
}
},
// configure JSHint
jshint: {
app: ['src/*.js']
}
});
// load pluginsng
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
// default
grunt.registerTask('default', ['jshint', 'uglify']);
grunt.registerTask('uglify', ['uglify']);
};
Here are the versions I am using:
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.11.2",
"grunt-contrib-uglify": "~0.9.1"
}
I ran grunt -v and after jshint finishes it outputs this forever:
Running "uglify" task
Running "uglify" task
Running "uglify" task
It doesn't seem to care what file I give it either, so it seems to be hitting some issue before it gets to reading my file.
Any ideas?
You're redefining the uglify task to run itself in your last line, replacing grunt-contrib-uglify:
grunt.registerTask('uglify', ['uglify']);
That's why your grunt is looping endlessly.
Just give it a different name:
grunt.registerTask('compress', ['uglify']);
Related
I have a web app in node.js that I want to start with nodemon, so everytime the main script changes, the webapp can start again.
At the same time, I have my coffeescript files that I need to recompile everytime any of them changes.
I've set up a grunt-contrib-watch task to listen just for app/frontend/*.coffee files, to dispatch the coffee parser.
However, this doesn't seem to be hapenning, since the nodemon task is also listening.
I set up app/frontend/ folder in nodemon ignore.
I also set up nodemon and watch as concurrent.
Still, everytime I edit a coffee script, the coffee task is not bein executed.
This is my Gruntfile
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
concurrent: {
dev: [
'nodemon',
'watch'
],
options: {
logConcurrentOutput: true
}
},
coffee: {
compile: {
files: {
'app/public/app.js': ['app/frontend/*.coffee']
}
}
},
nodemon: {
dev: {
script: 'app/index.js',
options: {
ignore: ['app/frontend/**', 'app/public/**']
}
}
},
watch: {
scripts: {
files: 'app/frontend/*.coffee',
tasks: ['coffee'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
// Default task(s).
grunt.registerTask('default', ['coffee', 'nodemon', 'watch']);
};
Your Gruntfile instructs Grunt to run nodemon and watch sequentially as the default task (and thus watch is never run as nodemon never finishes).
You need to explicitly include the concurrent task in the last line:
grunt.registerTask('default', ['coffee', 'concurrent']);
I am looking for fastest livereload result (sass into css + browerssync)
Grunt or Gulp is better fastest result?
I was experimenting with Grunt,
When save css file we get livereload without nothing delay but when sass compile sass into css its working with 1 or 2 seconds delay
This is my grunt code
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
watch: {
sass: {
files: "app/scss/*.scss",
tasks: "sass:dev"
}
},
sass: {
dev: {
files: {
"app/css/styles.css": "app/scss/styles.scss"
}
}
},
browserSync: {
default_options: {
bsFiles: {
src: [
"css/*.css",
"*.html"
]
},
options: {
watchTask: true,
proxy: "yourvhost.dev"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-browser-sync');
// Launch BrowserSync + watch task
grunt.registerTask('default', ['browserSync', 'watch']);
};
Gulp has traditionally been a bit quicker since it uses node streams. A more in-depth read about the node stream subject and the Gulp/Grunt compiling of Sass you find here.
edit: if you're thinking of using Grunt, you should check out grunt-sass. Seems to be the fastest one and pretty close to the Gulp one.
I'm trying to run GruntJS with those 3 plugins so it can watch for changes and first: lint the file and then reload express server.
My problem with the config below is that if jshint lint the file, nodemon doesn't run and vice versa.
// Gruntfile.js
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// ===========================================================================
// CONFIGURE GRUNT ===========================================================
// ===========================================================================
grunt.initConfig({
// get the configuration info from package.json ----------------------------
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration will go here
// configure jshint to validate js files -----------------------------------
jshint: {
options: {
reporter: require('jshint-stylish') // use jshint-stylish to make our errors look and read good
},
// when this task is run, lint the Gruntfile and all js files in src
build: ['Grunfile.js', 'routes/*.js']
},
watch: {
// for scripts, run jshint and uglify
scripts: {
files: 'routes/*.js',
tasks: ['jshint']
}
},
concurrent: {
dev: {
tasks: ['jshint', 'nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
}
}, // concurrent
nodemon: {
dev: {
script: './server.js'
}
} // nodemon
});
// ===========================================================================
// LOAD GRUNT PLUGINS ========================================================
// ===========================================================================
// we can only load these if they are in our package.json
// make sure you have run npm install so our app can find these
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.registerTask('default', '', function() {
var taskList = [
'jshint',
'nodemon',
'watch'
];
grunt.task.run(taskList);
});
};
EDIT (clarification):
The first time that I ran grunt, jshint lint the files, then nodemon start and jshint doesn't lint anymore.
Output:
grunt
Running "default" task
Running "jshint:build" (jshint) task
✔︎ No problems
Running "nodemon:dev" (nodemon) task
[nodemon] v1.2.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./server.js`
Express server listening on port 3000
Was a really silly mistake.
I wasn't loading grunt-concurrent, just installed grunt-concurrent and addeded it to Kelz's function and now its working :).
Thank you all.
Final code:
// Gruntfile.js
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// ===========================================================================
// CONFIGURE GRUNT ===========================================================
// ===========================================================================
grunt.initConfig({
// get the configuration info from package.json ----------------------------
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration will go here
// configure jshint to validate js files -----------------------------------
jshint: {
options: {
reporter: require('jshint-stylish') // use jshint-stylish to make our errors look and read good
},
// when this task is run, lint the Gruntfile and all js files in src
build: ['Grunfile.js', 'routes/*.js']
},
watch: {
// for scripts, run jshint and uglify
scripts: {
files: 'routes/*.js',
tasks: ['jshint']
}
}, // watch
nodemon: {
dev: {
script: './server.js'
}
}, // nodemon
concurrent: {
dev: {
tasks: ['jshint', 'nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
}
} // concurrent
});
// ===========================================================================
// LOAD GRUNT PLUGINS ========================================================
// ===========================================================================
// we can only load these if they are in our package.json
// make sure you have run npm install so our app can find these
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.registerTask('default', '', function() {
var taskList = [
'concurrent',
'jshint',
'nodemon',
'watch'
];
grunt.task.run(taskList);
});
};
Try running it as a function task:
grunt.registerTask('default', '', function() {
var taskList = [
'jshint',
'nodemon',
'watch'
];
grunt.task.run(taskList);
});
EDIT: Another method I've used to achieve the goal of auto rerunning tasks including express, using grunt-express-server, applied to your setup:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
watch: {
express: {
files: ['routes/*.js'],
tasks: ['jshint', 'express:dev'],
options: {
spawn: false
}
}
},
express: {
dev: {
options: {
script: 'app.js',
}
}
},
jshint: {
options: {
node: true
},
all: {
src: ['routes/*.js']
}
}
});
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', '', function() {
var taskList = [
'jshint',
'express:dev',
'watch'
];
grunt.task.run(taskList);
});
};
I'm new to using gruntjs and nodejs. I wanted to know how can I setup the gruntfile so that it watches both the sass files and the js files compiles using watch.
This is what I have so far:
module.exports = function ( grunt ) {
"use strict";
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
config: 'config.rb',
watch: true
}
}
}
});
grunt.registerTask('default', []);
};
Any help will be much appreciated. Thank you!
Try grunt-contrib-watch with grunt-contrib-sass. They're both Grunt plugins specifically for this kind of thing:
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/global.css': 'scss/screen.scss'
}
}
},
watch: {
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
},
The watch plugin configuration above will watch for changes in any .scss files, and will run the sass tasked (also defined above). You can even hook into livereload this way. You can also have multiple watches (the above only defines a css watch); creating a second watch to minify JS would be easy with grunt-contrib-uglify
I have an example you can look at that also concatenates JavaScript and does some minification with grunt-contrib-uglify. Here is the example.
I followed the instructions on the grunt.option page to create different configurations for different environments/targets such as development, staging, and production in my Gruntfile. However, upon doing so I found that my tasks silently fail.
I've reduced the problem to a very simple example. The following Gruntfile fails to build the file:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dev: {
options: {
compress: true
},
build: {
src: ['src/css/test.less'],
dest: 'build/css/test.css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less:dev']);
};
The output in my terminal is the following:
$ grunt
Running "less:dev" (less) task
Done, without errors.
If, however, I use the following Gruntfile, the build output is as expected:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
options: {
compress: true
},
build: {
src: ['src/css/test.less'],
dest: 'build/css/test.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less']);
};
The terminal output for this Gruntfile reflects the built file:
$ grunt
Running "less:build" (less) task
File build/css/test.css created.
Done, without errors.
What am I doing wrong in the first Gruntfile? What is it that I am missing about this task:target convention?
Your first Gruntfile - If you want per-target options, you need to specify the files object. So your code would be something like this:
less: {
dev: {
files: {
"build/css/test.css": "src/css/test.less"
}
},
production: {
options: {
compress: true
},
files: {
"build/css/test.css": "src/css/test.less"
}
},
}
Basically in your first Gruntfile build is an unknown object. Your target is named dev and grunt-contrib-less doesn't have an option called build so Grunt doesn't know where to write the files. Your second Gruntfile works because you set the options as a global. Use the above code if you want per-target options.