Question

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

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

到：

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

来回？

现在，当我开发时，我编辑了大约5到10个css和JS文件，但是当我编辑它们时，它显然是未经过编辑的unautoprefixed版本。我确信开发人员不是这样做的，所以我猜测有一个我不知道的步骤......

Answer 1

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

基本上，它是将组合/缩小文件映射回未构建状态的方法。当您为生产构建时，以及缩小和组合JavaScript文件，您将生成一个源映射，其中包含有关原始文件的信息。在生成的JavaScript中查询某个行和列号时，可以在源映射中执行查找，该映射将返回原始位置。开发人员工具（目前是WebKit每晚构建，谷歌浏览器或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.
});

只需确保您的网络服务器上的原始未分类文件也是服务器，以便浏览器可以下载它们。

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

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

使用Gulp和缩小的CSS / JS

2 个答案: