Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use gulp to select and move directories and their files

Tags:

node.js

gulp

glob

I'm currently using gulp to call a bash script that cleans my dist/ directory and moves the appropriate files to the clean directory. I would like this to be done with gulp because I am not sure the script would work on a non *nix file system.
So far, I'm using the gulp-clean module to clean the dist/ directory but when I try to move the required directories and their files to the dist folder, the directories are empty.

var gulp = require('gulp'),     clean = require('gulp-clean');  gulp.task('clean', function(){   return gulp.src(['dist/*'], {read:false})   .pipe(clean()); });  gulp.task('move',['clean'], function(){   gulp.src(['_locales', 'icons', 'src/page_action', 'manifest.json'])   .pipe(gulp.dest('dist')); });  gulp.task('dist', ['move']); 

calling gulp dist results in the the dist/ directory being populated with the correct directories but they are all empty

$ ls dist/* dist/manifest.json  dist/_locales:  dist/icons:  dist/page_action: 

How do I copy the directories and their contents to the dist/ folder?

like image 869
makenova Avatar asked Feb 04 '14 08:02

makenova


People also ask

What does gulp src do?

The src() and dest() methods are exposed by gulp to interact with files on your computer. src() is given a glob to read from the file system and produces a Node stream. It locates all matching files and reads them into memory to pass through the stream.

What was used by the gulp files?

Gulp is a task runner that uses Node. js as a platform. Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files.

How does gulp pipe work?

pipe() method attaches a Writable stream to the readable, causing it to switch automatically into flowing mode and push all of its data to the attached Writable. The flow of data will be automatically managed so that the destination Writable stream is not overwhelmed by a faster Readable stream.

What is gulp Gulpfile?

Gulpfile explained A gulpfile is a file in your project directory titled gulpfile. js (or capitalized as Gulpfile. js , like Makefile), that automatically loads when you run the gulp command.


1 Answers

You need to include the base option to src, which will preserve the file structure the way you want:

var filesToMove = [         './_locales/**/*.*',         './icons/**/*.*',         './src/page_action/**/*.*',         './manifest.json'     ];  gulp.task('move',['clean'], function(){   // the base option sets the relative root for the set of files,   // preserving the folder structure   gulp.src(filesToMove, { base: './' })   .pipe(gulp.dest('dist')); }); 

Also, you are probably going to have trouble down the road if you have all these source files in the root of your project.

If you can, I'd recommend you use a single src/ folder and move all your application-specific files into there. This makes maintenance easier moving forward, and prevents your build-specific files from getting mixed up with your application-specific files.

If you do this, then simply replace all occurrences of ./ with src/ in the example above.

like image 190
OverZealous Avatar answered Oct 11 '22 15:10

OverZealous