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?
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With