如何在gulp中處理* .js和* .min.js Bower文件

Question

在我的gulp文件中注入Bower組件時，我有這種不好的樣式代碼重復。 但是我不知道如何擺脫它。

一般來說，我們不能只說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文件並對其進行了丑化處理，還連接了.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']);