将CSS / JS缩小到各自的文件中

Question

I have this default gulp file from a Visual Studio template:

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

The problem I'm having is one of my js files in the directory has a dependency on knockout, but I'm only using knockout on one of the pages on the site. I don't want to include knockout on my shared view, and the default bundling all files into a single file causes a JS error "ko is undefined" as one of the JS files is dependent on KO.

Is there a way that I can minify files individually, without concatting it into the main "site.min.css"?

Answer 1

First you need to exclude the Knockout file from your min:js task. Prepending a path with ! tells gulp to ignore that file:

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("."));
});

Then you need to create a new task min:knockout that does nothing but minify your Knockout file. You'll probably want the minified file to end with a .min.js extension so you'll have to install the gulp-rename plugin as well.

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("."));
});

Finally you need to make sure your new min:knockout task is executed when running the min and minPreBuild tasks:

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