Gulp JS 和 SASS 缩小哈希文件名并替换 index.html 中的 href 和 src 的任务答案

【问题标题】：Gulp JS and SASS minify tasks that hash the filename and replaces the href and src in index.htmlGulp JS 和 SASS 缩小哈希文件名并替换 index.html 中的 href 和 src 的任务
【发布时间】：2024-01-31 02:00:01
【问题描述】：

下面是js minify任务：

gulp.task('jsBuildDev', function () {
    return gulp.src(['js/build/*.js'])
        .pipe(concat('build.js'))
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(hash())
        .pipe(uglify())
        .pipe(rename(function (path) { path.basename += "-min" }))
        .pipe(sourcemaps.write('./'))        
        .pipe(gulp.dest('./js/'))
});

下面是 sass minify 任务：

gulp.task('sass', function () {
    return gulp
        .src('./scss/style.scss')
        .pipe(hash())
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(sourcemaps.write('./'))
        .pipe(autoprefixer(autoprefixerOptions))
        .pipe(rename(function (path) { path.basename += "-min" }))
        .pipe(gulp.dest('./css/'));
});

这是一个替换所需 html 的任务：

gulp.task('htmlreplace', function () {
    gulp.src('pre-built-index.html')
    .pipe(htmlreplace({
        'css': 'styles.min.css',
        'js': 'js/build.min.js'
    }))
    .pipe(rename('index.html'))
    .pipe(gulp.dest('./'));
});

所有三个任务都可以正常工作，但是，我如何将 htmlreplace 合并到 jsBuildDev 任务中；以便'js': 'js/build.min.js' 等于在 js 缩小任务中找到的散列名称？所以它看起来像'js': 'js/build-86fb603a0875705077f6491fee6b5e07-min' 而不是'js': 'js/build.min.js'。

这同样适用于 sass 任务，但我假设两者都可以使用相同的解决方案来解决。

【问题讨论】：

标签： javascript sass gulp minify gulp-html-replace

【解决方案1】：

我确信有更优雅的方法可以做到这一点，但以下工作：

var gulp  =  require('gulp');
var hash = require('gulp-hash');
var rename = require('gulp-rename');
var htmlreplace  =  require('gulp-html-replace');

var hashedJS;
var hashedCSS;

gulp.task('jsBuildDev',  function ()  {

  return gulp.src('./app.js')
   .pipe(hash())
   .pipe(rename(function (path) {
    path.basename += "-min";

    hashedJS = path.basename + '.js';
    console.log("hashedJS = " + hashedJS);
    }))
  .pipe(gulp.dest('./js'));
});

gulp.task('sass', function () {
  return gulp.src('./app.scss')
    .pipe(hash())
    // .pipe(sourcemaps.init())
    // .pipe(sass(sassOptions).on('error', sass.logError))
    // .pipe(sourcemaps.write('./'))
    // .pipe(autoprefixer(autoprefixerOptions))
    .pipe(rename(function (path) {
      path.basename += "-min";

      hashedCSS = path.basename + '.css';
      console.log("hashedCSS = " + hashedCSS);
     }))
    .pipe(gulp.dest('./css'));
});

gulp.task('htmlreplace', ['jsBuildDev', 'sass'], function () {
  return gulp.src('app.html')
  .pipe(htmlreplace({
    'css': hashedCSS,
    'js': hashedJS
   }))
  .pipe(rename('index.html'))
  .pipe(gulp.dest('./'));
});

它创建了几个变量，这些变量在处理 js 和 scss 处理的相关任务中分配。你用“gulp htmlreplace”运行整个事情。所有三个任务必须一起运行才能使变量起作用。

否则，您可以通过在创建后检索文件名来设置替换散列文件名。例如，通过查看他们最近创建的文件的文件夹。但我所做的似乎更容易，虽然不是特别优雅。

让我知道这是否适合你。

【讨论】：