javascript - 将 css/js 缩小到各自的文件中

Question

我有来自 Visual Studio 模板的默认 gulp 文件:

/// <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 文件依赖于淘汰赛，但我只在网站的其中一个页面上使用淘汰赛。我不想在我的共享 View 中包含淘汰赛，并且默认将所有文件捆绑到一个文件中会导致 JS 错误“ko 未定义”，因为其中一个 JS 文件依赖于 KO。

有没有一种方法可以单独缩小文件，而不将其连接到主“site.min.css”中？

Answer 1

首先，您需要从 min:js 任务中排除 Knockout 文件。在路径前面添加 ! 告诉 gulp 忽略该文件:

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，它除了缩小 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"]);