压缩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"]);