npm and gulp - how to process modules installed with npm in gulp correctly

Question

I am currently setting up my frontend environment and can't figure out how to combine node modules to work with gulp correctly. Initially I thought about using bower, but since there is even a recommendation on the bower blog to use yarn I changed my mind. And because nodejs is already in use in my project, I came to this question.

If I want now to install Bootstrap 4 for instance, my snippet would probably look like this:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

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

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/tether/dist/js/tether.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

The problem I have with this snippet is that I would have to check the path to the needed files for every module I install and change the gulpfile in multiple places. So my question is, whether there is a better/easier workflow for this problem.

Answer 1

Instead of including the full path, try giving the absolute path of the files as done below; this way you need not make any change to gulp for every new file you add:

gulp.task('sass', function() {
  return gulp.src(
    ['node_modules/**/*.scss'],
    ['node_modules/**/*/.css'],
    {base:'node_modules'}
  )
  .pipe(sass())
  .pipe(gulp.dest("src/css"))
  .pipe(browserSync.stream());
});

gulp.task('js', function() {
  return gulp.src(
    ['node_modules/**/*.js'],
    ['node_modules/**/*/.min.js'],
    {base:'node_modules'}
  )
  .pipe(gulp.dest("src/js"))
  .pipe(browserSync.stream());
});