javascript - 版本控制包文件

Question

我有一个问题，每次我修改我的代码js，我必须重新加载我的浏览器三四次以清除缓存。所以很痛苦。

我正在寻找一种解决方案，例如对 gulp 生成的 bundle.js 进行版本控制。每次修改我的代码时，我都需要创建一个带有随机数的 bundle 文件，例如 bundle-1287138.js 并且我的 index.html 中的脚本标签需要自动生成已更新。

<script src = "/dist/bundle-1287138.js"></script>

我该怎么办？

下面的代码是我现在的 gulpfile.js:

var gulp       = require('gulp');
var fs         = require("fs");
var browserify = require("browserify");
var babelify   = require("babelify");
var source     = require('vinyl-source-stream');
var gutil      = require('gulp-util');

gulp.task('es6', function() {
    browserify({ debug: true })
        .transform(babelify)
        .require("./main.js", { entry: true })
        .bundle()
        .on('error',gutil.log)
        .pipe(source('./dist/bundle.js'))
        .pipe(gulp.dest('./'));
});

gulp.task('watch',function() {
    gulp.watch(['app.jsx', 'main.js', './components/**/*.jsx'], ['es6'])
});

gulp.task('default', ['es6','watch']);

谢谢!

更新

正如 MadScone 所说，我使用 BrowserSync 并且效果很好。只有一个问题，保存后有延迟(8 - 9 秒)。

这是我的文件夹结构:

- api
- frontend
    - gulpfile.js
- index.js

在 index.js 中，我使用 BrowserSync:

var express     = require('express');
var app         = express();
var browserSync = require('browser-sync');

var bs          = browserSync({ logSnippet: false });
bs.watch("frontend/dist/bundle.js", function() {
    var curr = new Date();
    console.log("changed " + curr.getHours() + ":" + curr.getMinutes() + ":" + curr.getSeconds());
    bs.reload();
});

app.use(require('connect-browser-sync')(bs));
app.use('/', express.static(path.join(__dirname, 'frontend')));

var server = app.listen(3000, function () {
    console.log('Server running at http://127.0.0.1:3000/');
});

在 gulpfile.js 中，我使用 gulp 构建我的 bundle.js:

var gulp        = require('gulp');
var fs          = require("fs");
var browserify  = require("browserify");
var babelify    = require("babelify");
var source      = require('vinyl-source-stream');
var gutil       = require('gulp-util');

gulp.task('es6', function() {
    browserify({ debug: true })
        .transform(babelify)
        .require("./main.js", { entry: true })
        .bundle()
        .on('error',gutil.log)
        .pipe(source('./dist/bundle.js'))
        .pipe(gulp.dest('./'));
});

gulp.task('watch',function() {
    gulp.watch(['app.jsx', 'main.js', './components/**/*.jsx'], ['es6'])
});

gulp.task('default', ['es6', 'watch']);

当我修改并保存我的代码时，gulp es6 任务重新生成 bundle.js 并生成以下日志:

[23:49:54] Starting 'es6'...
[23:49:54] Finished 'es6' after 6 ms 

因为 bundle.js 文件已更改，所以 BrowserSync 会在 5 秒后开始工作...

changed 23:49:59
[BS] Reloading Browsers...

能否请您解释一下为什么它没有在 es6 任务后立即重新加载。

谢谢!

Answer 1

如果你想在每次你的包改变时重新加载你的浏览器，你真的应该看看 Browsersync ，这是一种更好的方法。但是，如果您出于某种原因不想使用 Browsersync，下面有一个解决方案。

你可以使用类似 node-randomstring 的东西生成文件名(或者有很多其他方法可以做到这一点)然后使用 gulp-inject将 bundle 注入(inject)您的 HTML。

运行任务 inject 以产生您想要的输出。

var gulp         = require('gulp');
var fs           = require('fs');
var browserify   = require('browserify');
var babelify     = require('babelify');
var source       = require('vinyl-source-stream');
var gutil        = require('gulp-util');
var path         = require('path');
var inject       = require('gulp-inject');
var del          = require('del');
var randomString = require('randomstring');

var BUILD_DIRECTORY = 'dist';

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

    // Create random file name.
    var hash = randomString.generate(8);
    var name = path.join(BUILD_DIRECTORY, 'bundle-' + hash + '.js');

    return browserify({ debug: true })
        .transform(babelify)
        .require('./main.js', { entry: true })
        .bundle()
        .on('error',gutil.log)
        .pipe(source(name))
        .pipe(gulp.dest('./'));

});

// Inject bundle into HTML.
gulp.task('inject', ['clean', 'es6'], function() {

    const target = gulp.src('index.html');
    const sources = gulp.src(path.join(BUILD_DIRECTORY, '*.js'), {read: false});
    return target.pipe(inject(sources))
        .pipe(gulp.dest(BUILD_DIRECTORY));

});

// Delete the old bundle.
gulp.task('clean', function () {
    return del(path.join(BUILD_DIRECTORY, 'bundle*.js'));
});

每次运行 inject 时都会创建一个新的 bundle 文件。 clean 任务会删除所有旧的 bundle 文件，否则您最终会遇到大量这些文件。

请注意，我假设您的 index.html 和 main.js 位于目录的根目录中。

编辑

抱歉忘记了 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!-- inject:js -->
    <!-- endinject -->
</body>
</html>

编辑2

您应该在 gulp 文件中设置 Browsersync。这样你就可以准确地告诉 Browsersync 什么时候发生了变化，而不是让它在那里等待。

gulp.task('serve', ['inject'], function() {

    // Start browser sync after "inject" has finished.
    browserSync.init({
        server: {
            baseDir: './dist'
        }
    });

    // When the watch is triggered, call "reload". That will call "inject" and then let 
    // Browsersync know a change has occurred.
    gulp.watch('*.js', ['reload']);

});

gulp.task('reload', ['inject'], function() {
    browserSync.reload();
});

serve 任务现在编译所有 JavaScript，启动 Browsersync 并开始监视 JavaScript 文件更改(上面的示例只监视根目录，您可能必须更改它以适合您的项目)。一旦 gulp.watch() 发现变化，它将调用 reload 任务，该任务调用 inject 任务，然后重新加载 Browsersync。

reload 本身并没有做太多事情，但请注意它首先调用了 inject。因此它将等待该任务完成，然后再重新加载 Browsersync。