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文件并对其进行了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']);

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

1 个答案: