如何在 gulp 中处理 *.js 和 *.min.js bower 文件

Question

在我注入 bower 组件的 gulp 文件中，我有这种糟糕的代码重复。但我不知道如何摆脱它。

一般来说，我们不能只说bower_components/**/*.js，因为我们不想导入所有文件，而且对于生产，我们只想导入.min 文件。再次。我不能保证我使用的每个包都有.js 和.min.js 文件。所以只是*.js 和*.min.js 可能不起作用。

gulp.task('inject', () => {
let sources = gulp.src([
        // jquery
        'public/bower_components/jquery/dist/jquery.js',
        // bootstrap
        'public/bower_components/bootstrap/dist/js/bootstrap.js',
        'public/bower_components/bootstrap/dist/css/bootstrap.css',
        // angular
        'public/bower_components/angular/angular.js',
        'public/bower_components/angular/angular-csp.css',
        // angular route
        'public/bower_components/angular-route/angular-route.js',
    ],{read: false});

let min_sources = gulp.src([
        // jquery
        'public/bower_components/jquery/dist/jquery.min.js',
        // bootstrap
        'public/bower_components/bootstrap/dist/js/bootstrap.min.js',
        'public/bower_components/bootstrap/dist/css/bootstrap.min.css',
        // angular
        'public/bower_components/angular/angular.min.js',
        'public/bower_components/angular/angular-csp.css',
        // angular route
        'public/bower_components/angular-route/angular-route.min.js',
    ],{read: false});

return gulp.src('public/build/index.html')
    .pipe(gulpif(!argv.production, inject(sources, {relative: true})))
    .pipe(gulpif(argv.production, inject(min_sources, {relative: true})))
    .pipe(gulp.dest('public/build/'));
});

但是这种代码重复不是解决方案。我认为。除了在bower.js 文件中移动这两个数组之外，我该如何改进这部分？

Answer 1

也许你可以使用config.js。使用var config = require('../config'); 读取config.js 中的变量，这样您就可以分离文件路径和任务。

如果要分离 .js 和 .min.js ，可以使用

'src' : [
  'src/**/*.js',
  '!src/**/*.min.js',
]

例如下面我连接 .min.js / .js 文件并对其进行 uglify，同时连接 .css 文件并使用 cssnano() 对其进行压缩。最后vendor任务会输出vendor.bundle.js和vendor.bundle.css

config.js：

'use strict';

module.exports = {
    'vendor': {
        'scripts': {
            'src': [
                'bower_components/jquery/dist/jquery.min.js',
                'bower_components/lodash/dist/lodash.min.js',
                // Moment
                'bower_components/moment/min/moment.min.js',
                'bower_components/moment/locale/zh-tw.js',
                // Ionic & Angular
                'bower_components/ionic/js/ionic.bundle.min.js',
                'bower_components/ngCordova/dist/ng-cordova.min.js'
                // ...
            ],
            'dest': 'www/js',
            'output': 'vendor.bundle.js'
        },
        'styles': {
            'src': [
                // Mobiscroll
                'bower_external/mobiscroll/css/mobiscroll.custom-2.17.0.min.css',
                ],
            'dest': 'www/css',
            'output': 'vendor.bundle.css'
            }
        }
    }
}

vendor.js

'use strict';

var config       = require('../config');
var gulp         = require('gulp');
var gulpif       = require('gulp-if');
var concat       = require('gulp-concat');
var uglify       = require('gulp-uglify');
var sourcemaps   = require('gulp-sourcemaps');
var postcss      = require('gulp-postcss');
var cssnano      = require('cssnano');
var handleErrors = require('../util/handleErrors');
var browserSync  = require('browser-sync');
var pkg          = require('../../package.json');

gulp.task('vendorScripts', function () {
  return gulp.src(config.vendor.scripts.src)
    .pipe(concat(config.vendor.scripts.output))
    .pipe(uglify())
    .pipe(gulp.dest(config.vendor.scripts.dest));
});

gulp.task('vendorStyles', function () {
  return gulp.src(config.vendor.styles.src)
    .pipe(concat(config.vendor.styles.output))
    .pipe(postcss([ cssnano() ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.vendor.styles.dest));
});

gulp.task('vendor', ['vendorScripts', 'vendorStyles']);