代码之家 › 专栏 › 技术社区 › Mike Smith

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

gulp-html-replace minify gulp sass javascript

Mike Smith · 技术社区 · 7 年前

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 minify任务中的哈希名称?所以看起来像 'js': 'js/build-86fb603a0875705077f6491fee6b5e07-min' 而不是 “js”:“js/build.min.js” .

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

1 回复 | 直到 7 年前

Mark 7 年前

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处理的任务。你用“吞咽htmlreplace”来运行整个过程。这三个任务必须一起运行,变量才能工作。

如果这对你有效,请告诉我。