壓縮CSS/JS到他們的個人文件

Question

我有一個Visual Studio模板，此默認一飲而盡文件：

/// <binding BeforeBuild='clean, minPreBuild' /> 
"use strict"; 

var gulp = require("gulp"), 
    rimraf = require("rimraf"), 
    concat = require("gulp-concat"), 
    cssmin = require("gulp-cssmin"), 
    uglify = require("gulp-uglify"); 

var webroot = "./wwwroot/"; 

var paths = { 
    js: webroot + "js/**/*.js", 
    minJs: webroot + "js/**/*.min.js", 
    css: webroot + "css/**/*.css", 
    minCss: webroot + "css/**/*.min.css", 
    concatJsDest: webroot + "js/_site.min.js", 
    concatCssDest: webroot + "css/_site.min.css" 
}; 

gulp.task("clean:js", function (cb) { 
    rimraf(paths.concatJsDest, cb); 
}); 

gulp.task("clean:css", function (cb) { 
    rimraf(paths.concatCssDest, cb); 
}); 

gulp.task("clean", ["clean:js", "clean:css"]); 

gulp.task("min:js", function() { 
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." }) 
     .pipe(concat(paths.concatJsDest)) 
     .pipe(uglify()) 
     .pipe(gulp.dest(".")); 
}); 

gulp.task("min:css", function() { 
    return gulp.src([paths.css, "!" + paths.minCss]) 
     .pipe(concat(paths.concatCssDest)) 
     .pipe(cssmin()) 
     .pipe(gulp.dest(".")); 
}); 

gulp.task("min", ["min:js", "min:css"]); 
gulp.task("minPreBuild", ["min:js", "min:css"]); 

我遇到的問題是我的js的一個目錄中的文件，對淘汰賽的依賴，但我只在網站上的其中一頁上使用淘汰賽。我不想在我的共享視圖中包含knockout，並且默認將所有文件捆綁到單個文件中導致JS錯誤「ko is undefined」，因爲其中一個JS文件依賴於KO。

有沒有一種方法可以單獨縮小文件，而不需要將其解碼爲主「site.min.css」？

Answer 1

首先，您需要從您的min:js任務中排除Knockout文件。前面加上一個!路徑告訴吞掉忽略文件：

gulp.task("min:js", function() { 
    return gulp.src([ 
     paths.js, 
     "!" + paths.minJs, 
     "!js/path/to/knockout.js" // don't include knockout in _site.min.js 
     ], { base: "." }) 
    .pipe(concat(paths.concatJsDest)) 
    .pipe(uglify()) 
    .pipe(gulp.dest(".")); 
}); 

然後，你需要創建一個新的任務min:knockout，什麼也不做，但你再壓縮文件淘汰賽。您可能希望縮小文件以.min.js擴展名結尾，因此您還必須安裝gulp-rename插件。

var rename = require('gulp-rename'); 

gulp.task("min:knockout", function() { 
    return gulp.src("js/path/to/knockout.js", { base: "." }) 
    .pipe(rename("js/_knockout.min.js")) 
    .pipe(uglify()) 
    .pipe(gulp.dest(".")); 
}); 

最後，你需要確保運行min和minPreBuild任務時，執行新的min:knockout任務：

gulp.task("min", ["min:js", "min:knockout", "min:css"]); 
gulp.task("minPreBuild", ["min:js", "min:knockout", "min:css"]);