Gulp – Moving Files

Gulp – Moving Files

The first thing we will learn to do with gulp is to move files.

Let’s create simple styles files some_styles.css and more_styles.css.

/contents/styles/some_styles.css 
1
2
3

h1 {
  color: red;
}
/contents/styles/more_styles.css 
1
2
3

p {
  font-size: 30px;
}

Our project structure should now look like: 

1
2
3
4
5
6
7

/node_modules
/contents
  /styles
    more_styles.css
    some_styles.css
gulpfile.js
package.json

Update our gulpfile.js from the previous section and instruct gulp to move all the files found in the styles folder to our build/styles folder.

gulpfile.js 
1
2
3
4
5
6
7

var gulp = require('gulp');

gulp.task('default', [], function() {
  console.log("Moving all files in styles folder");
  gulp.src("contents/styles/**.*")
    .pipe(gulp.dest('build/styles'));
});

Well, What do we expect will happen when we run gulp? If you guessed the files will be copied and moved to the build/styles folder, then give yourself a cookie.

When we run gulp , we should see: 

1
2
3
4
5
6

$ gulp

Using gulpfile ~/YOUR_DIRECTORY/gulpfile.js
Starting 'default'...
Moving all files in styles folder
Finished 'default' after 7.27 ms

Our project should now look like: 

1
2
3
4
5
6
7
8
9
10
11

/build
  /styles
    some_styles.css
    more_styles.css
/node_modules
/contents
  /styles
    some_styles.css
    more_styles.css
gulpfile.js
package.json

So far so good, That’s it!!! See ya!!! :)