Gulp - 有谁知道如何缓存破解一个js文件？ [英] Gulp - does anyone know how to cache bust a js file?

问题描述

我使用gulp，angular2和html。

当前尝试缓存破坏的gulp文件：

 'use strict ; 
 
 const gulp = require（'gulp'）; 
 const ts = require（'gulp-typescript'）; 
 const uglify = require（'gulp-uglify'）; 
 const concat = require（'gulp-concat'）; 
 var htmlreplace = require（'gulp-html-replace'）; 
 var addsrc = require（'gulp-add-src'）; 
 var cachebust = require（'gulp-cache-bust'）; 
 
 //看到这篇文章：http://caveofcode.com/2016/03/gulp-tasks-for-minification-and-concatenation-of-dependencies-in-angularjs/ 
 
 gulp.task（'app-bundle'，function（）{
 var tsProject = ts.createProject（'tsconfig.json'，{
 typescript：require（'typescript'），
 outFile：'app.js'
}）; 
 
 var tsResult = gulp.src（[$ b $'node_modules / angular2 / typings / browser.d.ts' ，
'app / ** / *。ts'
]）
.pipe（ts（tsProject））; 
 
 return tsResult.js.pipe（addsrc .append（'config-prod.js'））
 .pipe（concat（'app.min.js'））
 .pipe（uglify（））
 .pipe（cachebust {type：'timestamp'}））
 .pipe（gulp.dest（'./ dist'））; 
 
}）; 
 $ b gulp.task（'vendor-bundle'，function（）{
 gulp.src（[$ b $'node_modules / es6-shim / es6-shim.min.js' ，
'node_modules / systemjs / dist / system-polyfills.js'，
'node_modules / angular2 / bundles / angular2-polyfills.js'，
'node_modules / systemjs / dist / system。 src.js'，
'node_modules / rxjs / bundles / Rx.js'，
'node_modules / angular2 / bundles / angular2.dev.js'，
'node_modules / angular2 / bundles / http.dev.js'
]）
 .pipe（concat（'vendors.min.js'））
 .pipe（uglify（））
 .pipe（cachebust（ {type：'timestamp'}））
 .pipe（gulp.dest（'./ dist'））; 
}）; 
 $ b gulp.task（'html-replace'，['app-bundle'，'vendor-bundle']，function（）{
 gulp.src（'index.html'） 
 .pipe（htmlreplace（{$ b $'vendor'：'vendors.min.js'，
'app'：'app.min.js'
}））
 .pipe（gulp.dest（'dist'））; 
}）; 
  

解决方案

gulp-cache-bust 只将查询字符串附加到资产引用。它不会以任何方式重命名或更改资产本身。

这意味着应用 cachebust（）到您的 .js 文件没有意义。您需要将其应用于引用 .js 文件的HTML：

  gulp.task（'html-replace'，['app-bundle'，'vendor-bundle']，function（）{
 gulp.src（'index.html'）
 .pipe （htmlreplace（{$ b $'vendor'：'vendors.min.js'，
'app'：'app.min.js'
}））
 .pipe（cachebust （{type：'timestamp'}））
 .pipe（gulp.dest（'dist'））; 
}）; 
  

Gulp - does anyone know how to cache bust a js file?

I'm using gulp, angular2 and html.

Current gulp file with an attempt of cache busting:

'use strict';

const gulp = require('gulp');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var htmlreplace = require('gulp-html-replace');
var addsrc = require('gulp-add-src');
var cachebust = require('gulp-cache-bust');

// See this article: http://caveofcode.com/2016/03/gulp-tasks-for-minification-and-concatenation-of-dependencies-in-angularjs/

gulp.task('app-bundle', function () {
  var tsProject = ts.createProject('tsconfig.json', {
      typescript: require('typescript'),
      outFile: 'app.js'
  });

  var tsResult = gulp.src([
    'node_modules/angular2/typings/browser.d.ts',
    'app/**/*.ts'
  ])
    .pipe(ts(tsProject));

  return tsResult.js.pipe(addsrc.append('config-prod.js'))
                    .pipe(concat('app.min.js'))
                    .pipe(uglify())
                    .pipe(cachebust({type: 'timestamp'}))
                    .pipe(gulp.dest('./dist'));

});

gulp.task('vendor-bundle', function() {
    gulp.src([
            'node_modules/es6-shim/es6-shim.min.js',
            'node_modules/systemjs/dist/system-polyfills.js',
            'node_modules/angular2/bundles/angular2-polyfills.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/rxjs/bundles/Rx.js',
            'node_modules/angular2/bundles/angular2.dev.js',
            'node_modules/angular2/bundles/http.dev.js'
        ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(cachebust({type: 'timestamp'}))
        .pipe(gulp.dest('./dist'));
});

gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle' ], function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'vendor': 'vendors.min.js',
        'app': 'app.min.js'
    }))
    .pipe(gulp.dest('dist'));
});

解决方案

gulp-cache-bust only appends a query string to asset references. It doesn't rename or change the assets themselves in any way.

That means applying cachebust() to your .js files makes no sense. You need to apply it to the HTML that references the .js files:

gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle' ], function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
      'vendor': 'vendors.min.js',
      'app': 'app.min.js'
    }))
    .pipe(cachebust({type: 'timestamp'}))
    .pipe(gulp.dest('dist'));
});

这篇关于Gulp - 有谁知道如何缓存破解一个js文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！