Copying files with Gulp doesn't work

JavaScript
1

In my Gulp file that I’m using to customize Bootstrap, I have a segment that simply copies over a few Bootstrap .js files to my development folder. But for some reason that task isn’t performed, but all other tasks are working fine, and I have no idea why. Here’s my gulpfile.js (it’s the second task):

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('autoprefixer');
const postcss = require('gulp-postcss');
const sourcemaps = require('gulp-sourcemaps');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
	return gulp.src('src/scss/*.scss')
		.pipe(sass())
		.pipe(postcss([autoprefixer()]))
		.pipe(gulp.dest("src/css"))
		.pipe(browserSync.stream());
});

// Copy bootstrap Javascript files into /src/js folder
gulp.task('js', function() {
	return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.js',
	                 'node_modules/bootstrap/dist/js/bootstrap.min.js',
	                 'node_modules/bootstrap/dist/js/bootstrap.bundle.js',
	                 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'])
		.pipe(gulp.dest("src/js"))
		.pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {
	browserSync.init({
        server: "./src"
    });
	gulp.watch('src/scss/*.scss', gulp.series('sass'));
	gulp.watch("src/*.html").on('change', browserSync.reload);
}));

gulp.task('autoprefixer', () => {
	return gulp.src('src/*.css')
		.pipe(sourcemaps.init())
		.pipe(postcss([autoprefixer()]))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('src/dest'))
});

gulp.task('default', gulp.series('serve'));

My file structure looks like this:

(project folder)
├── gulpfile.js
├── package-lock.json
├── package.json
├── /node_modules
│   ├── /@popperjs
│   ├── /autoprefixer
│   └── /bootstrap ...
└── /src
    ├── index.html
    ├── /css
    │   └── custom.css
    ├── /js
    └── /scss
        └── custom.scss

I’ve looked over gulpfile.js for hours and don’t understand why the file copy part won’t work, but everything else does. Can anyone see the problem? Thanks!

2

Can you use inspect?

node --inspect-brk ./node_modules/.bin/gulp css

If you’re using Node 6.3, use --inspect instead of --inspect-brk

You should then be able to browser to chrome://inspect to step through the code, set breakpoints, etc.

1 Like
3

omg, a few minutes after posting this I found the problem! The last line of the gulp file should read:

gulp.task('default', gulp.series('js','serve'));

I forgot to include the ‘js’ task at the end. DOH!!!

4 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.