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文件依赖于淘汰赛，但我只是在网站的其中一个网页上使用了淘汰赛。我不希望在我的共享视图中包含knockout，并且默认将所有文件捆绑到单个文件中会导致JS错误＆＃34; ko未定义＆＃34;因为其中一个JS文件依赖于KO。

有没有办法让我可以单独缩小文件，而无需将其连接到主＆＃34; site.min.css＆＃34;？

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:knockout和min任务时执行新的minPreBuild任务：

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

将css / js缩小为各自的文件

1 个答案: