* .jsと* .min.jsを処理する方法

Question

私のgulpファイルでは、Bowerコンポーネントを挿入するために、私はこの悪いスタイルコードの重複を持っています。しかし、私はそれを取り除く方法を知りません。

一般的に言えば、すべてのファイルをインポートする必要がなく、プロダクション用に.minファイルだけをインポートするため、ちょうどbower_components/**/*.jsと言うことはできません。再び。私が使用するすべてのパッケージに.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/')); 
}); 

しかし、このコードの複製は解決策ではありません。おもう。この2つの配列をbower.jsファイルに移動するだけでなく、この部分をどのように改善できますか？

Answer 1

おそらくconfig.jsを使用できます。 var config = require('../config');を使用してconfig.jsの変数を読み、ファイルパスとタスクを分けることができます。

あなたは.jsファイルと.min.jsを分離したい場合は、私は.min.js /の.jsファイルをCONCATし、それをuglify、またconcate .cssファイルの下に、あなたは、例えば

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

を使用することができますcssnano（）を使用して圧縮します。最後にvendorタスクが出力さvendor.bundle.jsと

config.jsのvendor.bundle.css：

あなたはいつも使用していないのはなぜ

'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']);