Question

以下是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 minify任务中找到的散列名称？所以它看起来像'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处理的依赖任务中分配的变量。你用“gulp htmlreplace”运行整个事情。必须同时运行所有三个任务才能使变量起作用。

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

请告诉我这是否适合您。

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

1 个答案: