I cannot understand how grunt matches tasks with Gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
concat: {
dist: {
src: ['src/*.js'],
dest: 'dest/all.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
It's a valid config. But I don't know how grunt match 'concat' to 'grunt-contrib-concat'.
Does grunt trim the 'grunt-contrib-' prefix to match 'concat' to 'grunt-contrib-concat'?
First, we look inside grunt-contrib-concat source code:
grunt.registerMultiTask('concat', 'Concatenate files.', function() {
Looking inside grunt creating tasks docs, the first argument passed into a task registration function is the name of the task:
grunt.registerMultiTask(taskName, [description, ] taskFunction)
grunt.registerTask(taskName, [description, ] taskFunction)
Consclusion
There is no "magic" names nor "grunt keywords"
There is no difference between your custom tasks and task plugins ( even grunt-contrib.. )
The API for creating tasks is simple as that.
contrib-less, contrib-jade, contrib-concat .... so contrib is just to signifies that these plugins are contributed by Grunt community developers and less, jade, concat indicate the modules which you want to work on your project as mentioned in gruntfile.js.
So when you say:
grunt.loadNpmTasks('grunt-contrib-concat')
It loads the mentioned module.
But in order to make it work when you fire grunt, you actually have to register it.
grunt.registerTask('default', ['concat','jade','less']);
grunt.registerTask('test', ['concat','jade','less']);
grunt.registerTask('dist', ['concat','jade','less','uglify']);
So as you can see in production we may want to uglify, so we can register our task in by 'dist'.
Related
I am a grunt and node noob but I managed to write a node script that does what I want it to and works from the command line. I don't want to publish the script as a node module but I would like to run it from my grunt file.
What changes (if any) do I need to make to the script for this to work?
The more I read about configuring grunt files and custom tasks the more confused I get. I currently have something that looks like this:
module.exports = function(grunt) {
grunt.initConfig({
'mytaskname': 'what goes here?'
});
grunt.loadNpmTasks('./node_modules/script_name');
grunt.registerTask('run-from-command-line', 'description', function() {
grunt.log.writeln('Not running...');
});
}
Any help would be greatly appreciated.
You could use the grunt-execute plugin for doing this which executes files in a node.js child process.
Example:
If your node script is in "node-scripts/script.js", Gruntfile.js would look something like this:
module.exports = function(grunt) {
grunt.initConfig({
execute: {
target: {
src: ["node-scripts/script.js"]
}
}
});
// Load the plugins
grunt.loadNpmTasks("grunt-execute");
grunt.registerTask("default", ["execute"]);
};
I need to alter a stream of files to contain a different base folder name. I thought the gulp-rename plugin would allow for this, but it only seems to replace the glob portion.
Example:
gulp.task("test", function() {
gulp.src("bower_components/**/*", { base: "bower_components", read:false })
.pipe($.rename(function (p) { p.dirname = "X/" + p.dirname; }))
.pipe($.print());
});
outputs:
[gulp] bower_components\X\jquery\test\data\offset\scroll.html
[gulp] bower_components\X\jquery\test\data\offset\static.html
[gulp] bower_components\X\jquery\test\data\offset\table.html
...
I want
[gulp] X\jquery\test\data\offset\scroll.html
[gulp] X\jquery\test\data\offset\static.html
[gulp] X\jquery\test\data\offset\table.html
...
Is there a way to do this with gulp-replace, or some other plugin?
I believe you could do this with gulp-tap to get a hold of the the file instances and alter properties on them before they get printed or use it to print them.
Out of curiosity what are you aiming to do?
Hope that helps!
EDIT-1::
The following is a slightly modified version of the example in the gulp-tap documentation which may work for your use case.
gulp.src("src/**/*.{coffee,js}")
.pipe(tap(function(file, t) {
file.path = 'X/' + file.path;
}))
.pipe($.print())
.pipe(gulp.dest('build'));
EDIT-2::
This is a common task I have set up in my projects for handling external scripts (note; I am using gulp-load-plugins hence invoking my plugins with plugins.<NAME>);
gulp.task('vendor:scripts:publish', function() {
return gulp.src(sources.vendor.js)
.pipe(plugins.plumber())
.pipe(plugins.concat('vendor.js'))
.pipe(gulp.dest(destinations.js))
.pipe(plugins.uglify())
.pipe(plugins.rename(pluginOpts.rename))
.pipe(gulp.dest(destinations.js));
});
destinations and sources are two variables that I have defined in a config file for my gulpfile.
But for clarity, sources.vendor.js points at an array much like the following;
js: [
'src/vendor/jquery/dist/jquery.js',
'src/vendor/lodash/lodash.js',
'src/vendor/backbone/backbone.js'
],
The reason my folder is named vendor and not bower_components is because I've made use of a .bowerrc file to point my bower installation at a different folder.
In addition if you have discrete scripts that you may not want to include all of the time you can look to make use of gulp-utils and gulp-filter to filter out certain scripts when an option is passed or not passed when gulp is invoked on the CLI.
For example; having gulp vendor:scripts:publish include all scripts but gulp vendor:scripts:publish --release omitting discrete scripts.
This then requires modifying your task to declare a filter that is piped in based on an option flag being picked up by gulp-utils.
var isRelease = (plugins.utils.env.release) ? true: false;
gulp.task('vendor:scripts:publish', function() {
var discreteFilter = plugins.filter([
'**/*.js',
'!**/discrete.min.js'
]);
return gulp.src(sources.vendor.js)
.pipe(plugins.plumber())
.pipe(isRelease ? discreteFilter: plugins.utils.noop())
.pipe(plugins.concat('vendor.js'))
.pipe(gulp.dest(destinations.js))
.pipe(plugins.uglify())
.pipe(plugins.rename(pluginOpts.rename))
.pipe(gulp.dest(destinations.js));
});
Hope that helps you out!
I have an app using Grunt, that I launch in my terminal, and I want to run a task through an another app.
So I'd like to know how can I include my Gruntfile.js to this other app, and run the task.
For now this new app is really basic, juste a simple local web page using NodeJS, with a button that launch the task.
Gruntfile (I want to run the "archive" task)
module.exports = function (grunt) {
require('time-grunt')(grunt);
require('jit-grunt')(grunt, {
ngtemplates: "grunt-angular-templates"
});
var Generator = require("./generator.js")(grunt);
var generator = new Generator();
generator.printLogo();
// Build
grunt.registerTask("build", function (fileType) {
//definition of build task
grunt.task.run(tasks);
});
// Archive Task.
grunt.registerTask("archive", ["build", "compress", "clean:post-rsync"]);
};
Other file : (I tried a require, It seems to work, but I can't run the "archive" task of the Gruntfile.)
var grunt = require('grunt');
var gruntfile = require('./Gruntfile.js')(grunt);
var app = express();
app.get('/', function(req, res){
res.render('test.ejs');
});
app.post('/create', function(req, res){
//run grunt task "archive" here
//gruntfile.grunt.registerTask("archive", ["build"]);
res.redirect('/');
});
app.listen(8080);
Do you have any idea how could I run the task in my gruntfile in this other file ?
(The function printLogo() is working so i'm sure the Gruntfile is include)
Thank you very much (I'm a beginner with Grunt so sorry if I miss something trivial)
You can just run a command from node. This way you don’t have to worry about dependencies and what not. You just spawn grunt, like you normally would, except programatically.
var spawn = require('child_process').spawn;
// This will run the 'archive' task of grunt
spawn('grunt', ['archive'], {
cwd: 'path/to/grunt/project'
});
Grunt is a command line tool, the cleanest approach here would be to refactor your Gruntfile and extract your task's logics into a library.
Then from your Gruntfile's task you can call that library, and from your /create route you can also call your library.
You can use grunt-hub plugin:
grunt.initConfig({
hub: {
all: {
src: ['../*/Gruntfile.js'],
tasks: ['jshint', 'nodeunit'],
},
},
});
We have a MEAN (nodes.js back-end + angular front-end), where we use the Amazon S3 sdk to upload files to the storage service. We have our AWS credentials and we need to use them in the code.
We would like to publish our project in a public repository, but we don't want to share our credentials (by the way, Amazon monitors GitHub and notifies developers who disclose their credentials). How should we adapt our development workflow to have something secure (no disclosure) and convenient?
The solution consists in tuning the Gruntfile.js file, which defines what needs to be done during the build process. Depending on the one that you use as a starting point, things will be a bit different (and various use cases might need to be considered).
In our case, we use the angular fullstack yeoman generator (https://github.com/DaftMonk/generator-angular-fullstack) to generate the project skeleton. The Gruntfile.js that is produced by the generator is fairly sophisticated, so we had to edit a couple of sections. Here are the key points:
1. Passing arguments to Grunt
The first thing that we need, is to be able to invoke the build process and to pass arguments. The arguments should not end up in the repository, so developers should create a script outside the codebase to launch the build process (or type the arguments manually each time...). Grunt gives the ability to access command line arguments with the grunt.option() function. So, the first modification to the Gruntfile.js file is to add the following two lines right at the beginning:
module.exports = function (grunt) {
var amznUserId = grunt.option('AMZN_USER_ID');
var amznUserPassword = grunt.option('AMZN_USER_PASSWORD');
...
}
If you do that and then invoke grunt by typing:
grunt build --AMZN_USER_ID=myUserId --AMZN_USER_PASSWORD=aSecret
grunt serve --AMZN_USER_ID=myUserId --AMZN_USER_PASSWORD=aSecret
Then you will have the credential values available in the script variables.
2. Adding placeholders in the source files
The AMZN credentials are used in an Angular.JS component, typically in a controller. What you need to do is to replace the hard-coded values with variable placeholders, like this:
angular.module('demoApp')
.controller('MainCtrl', function ($scope, $http, socket) {
$scope.amzn_user_id = '##AMZN_USER_ID';
$scope.amzn_user_password = '##AMZN_USER_PASSWORD';
3. Injecting command line arguments into the placeholders
The last (and most tricky) part of the solution consists of injecting the 2 values passed to grunt into the placeholders. There are different Grunt plugins that can be used for this purpose. We have used the grunt-replace plugin with success. Here is what we had to do:
3.1 Install the plugin
npm install grunt-replace --save
3.2 Configure the plugin (specify how the injection should happen, more on this at the end)
grunt.initConfig({
replace: {
dist: {
options: {
patterns: [
{
match: 'AMZN_USER_ID',
replacement: amznUserId
},
{
match: 'AMZN_USER_PASSWORD',
replacement: amznUserPassword
}
]
},
files: [
{
expand: true,
flatten: false,
src: ['.tmp/concat/app/app.js'],
dest: '.'
},
{
expand: false,
flatten: false,
src: ['client/app/main/main.controller.js'],
dest: '.tmp/app/main/main.controller.js'
}
]
}
},
3.3. Invoke the plugin in the grunt build and grunt serve workflows
Please note that the order is important and that the replace lines must be exactly in that position.
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'env:all', 'env:prod', 'express:prod', 'wait', 'open', 'express-keepalive']);
}
if (target === 'debug') {
return grunt.task.run([
'clean:server',
'env:all',
'injector:stylus',
'concurrent:server',
'injector',
'wiredep',
'autoprefixer',
'concurrent:debug'
]);
}
grunt.task.run([
'clean:server',
'env:all',
'injector:stylus',
'concurrent:server',
'injector',
'wiredep',
'replace',
'autoprefixer',
'express:dev',
'wait',
'open',
'watch'
]);
});
and
grunt.registerTask('build', [
'clean:dist',
'injector:stylus',
'concurrent:dist',
'injector',
'wiredep',
'useminPrepare',
'autoprefixer',
'ngtemplates',
'concat',
'replace',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin'
]);
What happens behind the scenes
The key point is to realize that the angular fullstack generator defines a build workflow, where a special directory named .tmp is used. The content of this directory is not always the same (grunt build and grunt serve use it in slightly different ways). That is the reason why we had to define two replacement rules.
I feel like I'm missing something.
Here is what I want to achieve :
Having a grunt task that executes my server.js and runs watch task in parallel. It feels to me that this is precisely one of the tasks grunt was designed for but I can't achieve this configuration.
Among others, I have read this :
Running Node app through Grunt
but I still can't make it.
Here is my Gruntfile.js :
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch: {
scripts: {
files: ['*.js'],
tasks: ['start'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('start', function() {
grunt.util.spawn({
cmd: 'node',
args: ['server.js']
});
grunt.task.run('watch');
});
grunt.registerTask('default', 'start');
};
I have "grunt-contrib-watch": "~0.3.1" which should be higher version than grunt-contrib-watch#0.3.0 as in the previously mentioned post.
If you could help me achieve the proper configuration, I would be extremely grateful. But more in general, I don't understand why there is no official grunt-contrib-nodemon-like package and task since I have the feeling it would be another great reason to use grunt (which I really like as a tool !)
Thanks
Edit: grunt-nodemon
since writing this, a nice person developed that.
I was having a lot of trouble using grunt.util.spawn to fire off new processes. They would run, but they wouldn't give me any output back. Perhaps you can figure out what I could not in these docs. http://gruntjs.com/api/grunt.util#grunt.util.spawn
Two problems I see with what you have:
I think grunt.registerTask() has to take three arguments when you use a callback function to run your task.
I don't think you can just call node server.js over and over again everytime a file changes. It will work on the first time, for it to really work you'd have to manage the server as a child process, killing and restarting it on subsequent file changes.
For the registerTask arguments try this, just to see if you can get something to work in your current implementation.
http://gruntjs.com/api/grunt.task#grunt.task.registertask
It takes (taskName, description, taskFunction) like so:
grunt.registerTask('start', 'My start task description', function() {
grunt.util.spawn({
cmd: 'node',
args: ['server.js']
});
grunt.task.run('watch');
});
That might at least get your watch to run node server.js the first time a file changes.
Here's what I would do instead.
Either just use nodemon $ nodemon server.js as is
or...
Read the source and use grunt-develop
He is managing the server as a child process, might be what you're looking for.
or...
Get grunt-shell
npm install grunt-shell --save-dev
And use it to run nodemon for you:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
serverFile: 'server.js',
shell: {
nodemon: {
command: 'nodemon <%= serverFile %>',
options: {
stdout: true,
stderr: true
}
}
},
watch: { /* nothing to do in watch anymore */ }
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-shell');
grunt.registerTask('default', 'shell:nodemon');
};
$ grunt shell:nodemon
I sincerely hope that helps. Good luck!
Hi I also came across this problem and here is my solution (based on nackjicholson's answer). This uses grunt-nodemon in a spawned process. so I can:
Reload nodejs
Watch for changes to e.g. .less files
Get output of both tasks
grunt.loadNpmTasks('grunt-nodemon');
grunt.initConfig({
nodemon: {
dev: {
options: {
file: 'server.js',
nodeArgs: ['--debug'],
env: {
PORT: '8282'
}
}
}
},
});
grunt.registerTask('server', function (target) {
// Running nodejs in a different process and displaying output on the main console
var nodemon = grunt.util.spawn({
cmd: 'grunt',
grunt: true,
args: 'nodemon'
});
nodemon.stdout.pipe(process.stdout);
nodemon.stderr.pipe(process.stderr);
// here you can run other tasks e.g.
// grunt.task.run([ 'watch' ]);
});
Use grunt-concurrent
The issue is that tasks like watch and nodemon will never terminate, so grunt will never reach them. You need to spawn a new process.
You can do this easily using grunt-concurrent:
https://github.com/sindresorhus/grunt-concurrent
For example:
module.exports = function(grunt) {
grunt.initConfig({
...
concurrent: {
dev: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
}
}
});
};
The two will now run happily side by side.