html - 使用 Gulp 和缩小的 CSS/JS

Question

我最近开始使用 Gulp 来自动添加前缀、缩小 css 和缩小我的 JS。现在，所有获得自动前缀、缩小的文件都位于 dist 文件夹中。有没有一种方法可以将我的 html 文件指向这些缩小版本，而无需手动重新键入以下内容:

<script src="js/custom.js"></script>

到:

<script src="dist/custom.min.js"></script>

来来回回？

现在，当我开发时，我编辑了大约 5 到 10 个 css 和 JS 文件，但是当我编辑它们时，它显然是未缩小的、未自动添加前缀的版本。我敢肯定开发人员不是这样做的，所以我猜我遗漏了一个步骤......

Answer 1

你应该看看使用 source maps .来自那篇文章:

Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files.

gulp-sourcemaps是你需要使用的。您没有提到您使用的是哪些 gulp 插件，但它们很有可能 have support for source maps .

这是一个简单的示例，说明您将如何使用它:

var gulp = require('gulp');
var minify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('minify', function() {
    gulp.src('src/*.js')
        .pipe(sourcemaps.init())    // Initialize the source maps.
        .pipe(minify())             // Do your minification, concatenation, etc.
        .pipe(sourcemaps.write())   // Write the source maps.
        .pipe(gulp.dest('dist'));   // Write the minified files.
});

只要确保原始未缩小的文件也由您的网络服务器提供服务器，以便浏览器可以下载它们。

这还有一个额外的好处，即当您在开发时测试您的网页时，您实际上是在运行您将最终部署的精简代码。