如何在Gulp中高效处理通过npm安装的前端模块？

嘿，我完全懂你现在的困扰——每次装个新Node模块都得翻半天文件路径，还得在Gulpfile里改好几个地方，实在太繁琐了！针对你用Bootstrap 4+Gulp+Yarn的场景，我给你分享几个更省心的工作流优化方案：

方案1：统一管理第三方依赖路径（最基础的优化） #

先把所有第三方模块的路径集中放在一个变量里，以后新增依赖只需要在这个变量里加路径，不用到处修改任务代码：

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

// 集中管理所有第三方依赖的路径
const vendorPaths = {
  scss: [
    'node_modules/bootstrap/scss/bootstrap.scss'
  ],
  js: [
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/tether/dist/js/tether.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
  ]
};

// 编译SCSS任务，直接复用变量
gulp.task('sass', function() {
  return gulp.src([...vendorPaths.scss, 'src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
});

// 处理JS任务，同样复用变量
gulp.task('js', function() {
  return gulp.src(vendorPaths.js)
    .pipe(gulp.dest("src/js"))
    .pipe(browserSync.stream());
});

方案2：合并压缩第三方资源（既省心又提升性能） #

每次复制一堆零散的JS/CSS文件不仅麻烦，还会增加页面请求数。用gulp-concat把第三方资源合并成单个文件，再用gulp-uglify压缩（JS），一步到位：

首先安装依赖：

yarn add gulp-concat gulp-uglify --dev

然后修改Gulp任务：

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

const vendorPaths = {
  scss: [
    'node_modules/bootstrap/scss/bootstrap.scss'
  ],
  js: [
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/tether/dist/js/tether.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
  ]
};

// 合并压缩第三方JS成单个vendor.min.js
gulp.task('vendor:js', function() {
  return gulp.src(vendorPaths.js)
    .pipe(concat('vendor.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest("src/js"))
    .pipe(browserSync.stream());
});

// SCSS也可以合并成单个main.min.css（可选压缩）
gulp.task('sass', function() {
  return gulp.src([...vendorPaths.scss, 'src/scss/*.scss'])
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(concat('main.min.css'))
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
});

这样以后页面只需要引入vendor.min.js和main.min.css，既减少了配置工作量，又提升了页面加载速度。

方案3：自动加载Gulp插件（减少冗余配置） #

如果你的Gulp插件越来越多，每次都要手动require会很麻烦。用gulp-load-plugins可以自动加载所有gulp-*开头的插件，不用一个个写require：

先安装插件：

yarn add gulp-load-plugins --dev

然后简化你的Gulpfile：

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
// 自动加载所有gulp插件，用$.xxx调用
const $ = require('gulp-load-plugins')();

const vendorPaths = {
  scss: [
    'node_modules/bootstrap/scss/bootstrap.scss'
  ],
  js: [
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/tether/dist/js/tether.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
  ]
};

gulp.task('sass', function() {
  return gulp.src([...vendorPaths.scss, 'src/scss/*.scss'])
    .pipe($.sass({ outputStyle: 'compressed' }))
    .pipe($.concat('main.min.css'))
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
});

gulp.task('vendor:js', function() {
  return gulp.src(vendorPaths.js)
    .pipe($.concat('vendor.min.js'))
    .pipe($.uglify())
    .pipe(gulp.dest("src/js"))
    .pipe(browserSync.stream());
});

以后再装新的Gulp插件，比如gulp-autoprefixer，直接用$.autoprefixer()就行，不用再写require。

总结 #

最核心的思路就是把重复的、需要频繁修改的部分抽离出来统一管理，从统一路径变量开始，再到合并资源、自动加载插件，一步步让你的Gulp工作流更简洁、更易维护。

内容的提问来源于stack exchange，提问作者Alexander Belokon