使用 Gulp 和缩小的 CSS/JS答案

【问题标题】：Using Gulp and minified CSS/JS使用 Gulp 和缩小的 CSS/JS
【发布时间】：2016-03-12 06:50:34
【问题描述】：

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

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

到：

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

来回？

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

【问题讨论】：

"手动重新输入 to:" .. 这到底是什么意思。不太确定您想要实现什么，但您可能想查看wiredep
在部署这个的时候，他想用缩小版的js自动替换1个js的url。 -- 这就是我在这里得到的
你听说过gulp-inject，它应该符合要求，它不像它会编辑路径..但是你应该使用gulp-inject注入缩小/非缩小的两个路径跨度>

标签： html css gulp

【解决方案1】：

你应该看看使用source maps。从那篇文章：

基本上，这是一种将组合/缩小文件映射回未构建状态的方法。当您为生产而构建时，连同压缩和组合您的 JavaScript 文件，您会生成一个源映射，其中包含有关您的原始文件的信息。当您在生成的 JavaScript 中查询某个行号和列号时，您可以在返回原始位置的源映射中进行查找。开发人员工具（目前是 WebKit nightly builds、Google Chrome 或 Firefox 23+）可以自动解析源映射，并使其看起来好像在运行未压缩和未组合的文件。

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

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

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

【讨论】：

他不是在问如何生成缩小文件，而是在构建后如何在不手动编辑的情况下包含缩小文件。
我确实知道。这里的根本原因是 OP 的开发环境设计得不好。他本可以包含缩小版本并使用 sourcemap 进行调试。然而，他没有。我不知道为什么，但也许是有原因的。目前，我不知道他是否有努力重构他的项目，那么我的答案是修复。

【解决方案2】：

你可以试试gulp-replace插件，写一个任务，类似这样：

var replace = require('gulp-replace')
gulp.task('adoptDist', function() {
    return gulp.src(paths.dest + '/www/**/*.html', { base: paths.dest })
        .pipe(replace(/src="js\/(.+?)\.js"/g, function(match, $1) {
            return 'src="dist/' + $1 + '.min.js"'
        }))
        .pipe(gulp.dest(paths.dest))
});

【讨论】：