Gulp JS 和 SASS 缩小散列文件名并替换 index.html 中的 href 和 src 的任务

Question

以下是 js 缩小任务：

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 缩小任务：

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 任务，但我假设两者都可以用相同的解决方案解决。

Answer 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 处理的 dependent 任务中分配。你运行整个事情 "gulp htmlreplace"。所有三个任务必须运行在一起才能使变量起作用。

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

让我知道这是否适合你。

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.html

javascript

sass

minify

gulp

gulp-html-replace