Grunt task that can copy 'default files' to a destination directory? - gruntjs

Does anyone know how I can create a custom Grunt task that is able to copy files saved within the published grunt task?
For example the task:
node_modules/grunt-foo/tasks/foo.js
node_modules/grunt-foo/tasks/support/foo-boilerplate.txt
The task in my Gruntfile
foo: {
dest: "target/foo"
}
When the task runs I would want "foo-boilerplate.txt" to "target/foo/".
target/foo/foo-boilerplate.txt
There'll be more going on in the task so I don't want to imply that all I'm doing is copying boilerplate code over. It is just one use case within the task.
Can someone give me an example of how I can do this within my foo.js task file?

So, you want to copy some files to some destination, right?
Start by defining that copy operation using grunt-contrib-copy:
copy: {
boilercode: {
src: ['node_modules/grunt-foo/tasks/support/foo-boilerplate.txt'],
dest: 'target/foo',
},
},
Then you want your foo task to perform a number of other tasks, including that copy operation:
grunt.registerTask('foo', ['copy:boilercode', 'anothersupertask', 'yetanothertask']);
... all you now have to do is have something done in anothersupertask.
grunt. registerMultiTask('anothersupertask', 'super!', function(){})
Am I missing something? (I don't know what you call "the published grunt task")
For reference:
grunt-contrib-copy
grunt tasks

I found a solution. Within my multi-task I used __dirname to reference the directory that were the task was located.
var fileToCopy = path.join(__dirname, "support", "foo-boilerplate.txt");
file.copy(fileToCopy, path.join(target, "foo-boilerplate.txt"));

Related

grunt: run multiple task but with different configuration

I could not think of an appropriate description for title, sorry. I am working on a project where the Gruntfile.js is already defined with certain task.
copy: {
task1:{
},
task2:{
}
},
clean: ['folder']
grunt.registerTask('default',['clean','copy']);
I want to register another task that does clean and copy but in different folder/file and I want to run them only when I need some updates. Something like
copy:{
newTask1:{
}
}
clean:['newFolder']
grunt.registerTask('newUpdateTask',['clean','copy:newTask1']);
The problem is I don't want this new task in the original copy because when I run grunt default it will loop over the newTask as well which I dont want.

grunt-wiredep - Want to get dependencies written into file

The common use of grunt-wiredep is to scan through your given HTML and inject the relevant dependencies into that HTML.
I'm looking to instead get the JS & CSS dependencies, in the order as determined by wiredep, concat them into a single JS and single CSS file and write those files.
I can see that wiredep itself is happy to return an object with an ordered list but the syntax for getting Grunt to write these into files is beyond me.
Does anyone know if this is possible and what the syntax would be? The first thing that all grunt-wiredep tasks start with is a source HTML file and that's not what I'm looking to do.
Any advice appreciated!
Thanks for your solution!
I've added some extra details, so it works out of the box:
//Put all bower files in one file
grunt.registerTask('bower-bundler', function() {
//Point to the file which source you need to bundle
var result = require('wiredep')({
src: ['index.html']
});
//Set grunt config for concat task based on result.js and add an output file
grunt.config.set('concat.withWiredepJS', {
src: [
result.js
],
dest: 'build/lib_min.js'
});
//Run the task right away
grunt.task.run('concat:withWiredepJS');
});
So the way I finally overcame this with a colleague is remarkably simple.
I set up a new Grunt task to get the object I needed from the node Wiredep process as here:
grunt.registerTask('bower-bundler', function () {
var result = require('wiredep')();
grunt.config.set('concat.wiredepCSS.src', result.css);
grunt.config.set('concat.wiredepJS.src', result.js);
});
The grunt.config.set() allows you to set a task's source outside of it's config block.

Multi-language app -> Angular-gettext: how to update po files?

I am building an angular app, with internationalization using angular-gettext.
I would like to know how to better automate the workflow when updating the translation files.
Currently it is the following:
- running "grunt" (generation of pot file + translation files)
- opening all "po" files in poedit
- in poedit, update po file with the new "pot" file
- update translations in poedit & save
- run grunt again
Is there a way to have something better?
Like, is it possible to apply the pot file to all "po" files using a grunt command?
Here is my gruntfile currently.
Thanks a lot
module.exports = function(grunt)
{
grunt.initConfig({
nggettext_extract: {
pot: {
files: {
'po/template.pot': ['www/app/**/*.html']
}
},
},
nggettext_compile: {
all: {
options: {
module: 'app'
},
files: {
'www/resources/translations.js': ['po/*.po']
}
},
}
});
grunt.loadNpmTasks('grunt-angular-gettext');
// Default task(s).
grunt.registerTask('default', ['nggettext_extract', 'nggettext_compile']);
}
poedit doesn't have a command line argument to execute the "Update from pot" file feature. So I don't think it will be possible with it.
Actually there is a way to do this!
We wrote grunt tasks to call command line gettext utilities. They are also available for windows here.
Basically you need to call msgmerge with the po file and the pot file to update it. See the online documentation for msgmerge to see what you may need. It's pretty slick once you get it going.

Can an assemble target be silenced if there are no matching files? (Without using --force)

I have this assemble grunt target:
docs: {
files: {'<%= site.tmp %>/': ['<%= site.pages %>/**/*.html'] }
},
If there is no matching content, it complains, saying "Warning: Source files not found. Use --force to continue". The task then aborts. I don't mind the warning but I would like the option to configure the task to continue rather than having to use "--force" on the command line. Is this possible?
ps. The reason why this task is now failing is that I have converted the content to markdown. I am trying to build a scaffold that allows users to use markdown, hbs or html in any combination.
Based on what you are saying, you can use a little unix trick here.
docs: {
files: {'<%= site.tmp %>/': ['<%= site.pages %>/**/*.{html,hbs,md}'] }
},
That code basically looks for anything ending in .html, .hbs, or .md.
Since this is really a Grunt error, you would need to simply write your file object to allow for more possibilities.
For example, the above would only work if the location actually has files. If Grunt looks in that location and doesn't see any of the acceptable files, it will display the error you are getting now.

How to use grunt-contrib-livereload?

I'm trying to use grunt-contrib-livereload, but can't seem to figure it out. The readme seems to skip over everything that I need explained, and then ends with an example that doesn't work when I try it and doesn't seem directly related to the documentation. I have searched for a better explanation in a blog post or tutorial or whatever, but haven't been able to find one. Can someone please explain how to get started with this tool?
Here are the kinds of questions I have, based on the readme:
The documentation says the livereload task "must be passed the list of files that have changed" --- but how do I pass it this list of files? The example does not seem to illustrate this. Does regarde pass the list?
Is grunt-contrib-connect required? What does it do, and how do I use it? Do I need to learn connect before I try using livereload?
The readme mentions middleware that "must be the first one inserted" --- but inserted into what, before what else? And how is it inserted?
And I suppose I don't understand how I need to manipulate ports. "All the browsers listening on the livereload port will be reloaded" --- but how do I know which browser is listening to which port? Do I need to learn all about ports before I can try using livereload? (Any suggestion on how to best learn about that?)
Finally, in the example, there is a folderMount function that doesn't seem related to any of the documentation before. What is that, and do I need it?
I guess I'm asking if someone can please:
point me towards a tutorial that is much more effective than the current readme;
explain these unexplained parts of the readme, if those answers are what I need to understand the plugin;
or provide a functional example with some explanation of why it is functional.
Live reloading is now built into grunt-contrib-watch version 0.4.0. grunt-contrib-livereload and grunt-regarde will be deprecated soon.
Now just set the option livereload to true in your config and it will create a live reload server then reload after the tasks have run:
grunt.initConfig({
watch: {
all: {
options: { livereload: true },
files: ['lib/*.js'],
tasks: ['jshint'],
},
},
});
By default the live reload server will be started on port 35729. So to enable live reloading on your page just add <script src="http://localhost:35729/livereload.js"></script> to your page.
View more info on the docs: https://github.com/gruntjs/grunt-contrib-watch#live-reloading
Edit: Check versioning info. grunt-contrib-watch now has livereload support baked in.
What a doozy. I ran into issues with this one too so let me do what I can to explain (or at least get you up and running). Keep in mind, this is how I have it set up and it seems to work most of the time.
For starters, you'll want to make sure you've udpated your package.json with the right dependencies. I'm not sure that livereload works with the baked in "watch" task and I've been using grunt-regarde of late. My package.json usually looks like this:
"dependencies": {
"grunt": "~0.4.x",
"grunt-contrib-livereload": "0.1.2",
"grunt-contrib-connect": "0.2.0",
"grunt-regarde": "0.1.1"
},
Obvi you want grunt (duhhh), livereload, connect seems to help with mounting folders, and regarde is like grunt-watch, it just seems to work better (I forget why exactly).
You could make your package.json even better by specifying livereload in its own "devDependencies" object if you're so inclined. Now, run your good old fasioned npm install to get the goodies in your project.
Let's talk gruntfiles:
As you probably know, the gruntfile is what makes the magic happen. Somewhere towards the bottom of your gruntfile, you'll want to specify
grunt.loadNpmTasks('grunt-regarde');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.loadNpmTasks('grunt-contrib-connect');
At the top of your gruntfile, we'll want to add some utils for livereload. Under /*global module:false*/, go ahead and add var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;.
After that, you don't really need to learn connect, you just gotta use it. Check my style:
var folderMount = function folderMount(connect, point) {
return connect.static(path.resolve(point));
};
This comes before module.exports = function(grunt) {
Now let's get into the meat of the gruntfile. Again, I forget what connect is doing but this is where the middleware magic comes into play. In your modules.exports, add:
connect: {
livereload: {
options: {
port: 9999,
middleware: function(connect, options) {
return [lrSnippet, folderMount(connect, '.')]
}
}
}
},
Now we want to have the files watched. I like to set up a few different tasks since I don't want my whole grunt process running every time I save a CSS file. Here's what I work with (again, add to module.exports):
regarde: {
txt: {
files: ['styles/*.css', 'index.html'],
tasks: ['livereload']
},
styles: {
files: ['sass/*.scss', 'sass/*/*.scss'],
tasks: ['compass']
},
templates: {
files: ['templates/*.jade'],
tasks: ['jade']
}
},
You can see that I only want livereload to fire when there have been changes to my compiled css (*.css) or to my compiled html. If I edit a SCSS file, I want to fire off just compass. If I edit a jade template, I want to only fire the jade to HTML compiler. I think you can see what's going on. You can toy with this, just be smart about it because you could get caught in an infinite loop.
Lastly, you need to fire off these processes. I like tying them all to my main grunt task because my gruntfile is just that sweet.
// Default task.
grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']);
Now, when you fire up grunt in the CLI, you should (hopefully, maybe, cross your fingers) get something like this:
Running "connect:livereload" (connect) task
Starting connect web server on localhost:9999.
Browse to http://localhost:9999/yourpage.html and watch magic happen.
full gruntfile here. full package.json here.
Here is a solution based on Gulp instead of Grunt and the following Gulpfile.js to get livereload working:
var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');
var config = {
rootDir: __dirname,
servingPort: 8080,
// the files you want to watch for changes for live reload
filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}
// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);
gulp.task('watch', ['connect'], function () {
gulpLivereload.listen();
gulp.watch(config.filesToWatch, function(file) {
gulp.src(file.path)
.pipe(gulpLivereload());
});
});
gulp.task('serve', ['connect'], function () {
return opn('http://localhost:' + config.servingPort);
});
gulp.task('connect', function(){
return connect()
.use(connectLivereload())
.use(connect.static(config.rootDir))
.listen(config.servingPort);
});
I know this is a little old but can help someone.
In the Gruntfile.js add "options":
sass: {
files: 'scss/**/*.scss',
tasks: ['sass'],
options: {
livereload: true,
}
}
In the index add:
<script src="http://localhost:35729/livereload.js"></script>

Resources