Sorry for not posting regularly here, I was on holidays during late December till January, so didn’t get the time or the change to blog, but will get back to the routine of blogging more often.
This blog post will be the continuation on Using Grunt. We went through some basic of using Grunt, in this post I will cover copy of files using grunt. One can definitely use their system commands (cp, mv, del, rm, etc) to copy files but having the task runner to automate it for you, will make the mundane task of copy easier and not to mention portable to other platform.
In our example we will start off with a simple node express app and we wish to copy the html files to build folder.
Our file structure may look somewhat like:
GruntCopySolution
We will now focus on the Gruntfile.js, as some of you may recall a simple grunt file looks somewhat like
|
1 2 3 4 5 6 7 8 9 10 11 |
module.exports = function(grunt) { // Grunt configuration goes into initConfig grunt.initConfig({ }); // Next one would load plugins // Here is where we would define our task }; |
We will be using the grunt-contrib-copy plugin for copying files, the reason we will use grunt to copy files is because it will abstract away the system calls of copy from us, so that we can use the same script in windows, mac or in linux.
To install grunt-contrib-copy, we will use the npm command and save it in our dev
|
1 |
$npm install grunt-contrib-copy --save-dev |
We will now add the copy information and load the npm in our gruntfile.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
grunt.initConfig({ //use the copy with source and destination copy: { html: { files: [ { src: 'default.html', dest: 'build/' } ] } }); //load the copy module grunt.loadNpmTasks('grunt-contrib-copy'); //register the build task grunt.registerTask('build', ['copy:html']); |
We can run the grunt command of copy with html, this will also create the build folder for us
|
1 2 3 4 5 |
$grunt copy:html Running "copy:html" (copy) task Copied 1 file Done, without errors. |
One can also use the build task to run the copy command, note: I am passing the copy:html as an array to the second parameter in our gruntfile, I can continue adding task to the array e.g copy:somedir, etc, etc
|
1 2 3 4 5 |
$grunt build Running "copy:html" (copy) task Copied 1 file Done, without errors. |
We may also want to copy some of our bower component file over to the build, we can add another config object to grunt copy like below (If you are interested in learning Bower please read my other post on Bower)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
grunt.initConfig({ //use the copy with source and destination copy: { html: { files: [ { src: 'default.html', dest: 'build/' } ] }, bower: { files: [ { src: 'bower_components/**', dest: 'build/' } ] } } }); |
Grunt has a lot of plugin that can help us do a tone of things, in the next post we will go over some plugins that will help us minify css, JavaScript and even contact files for us.
Leave A Comment