Question

我尝试配置Gulp 3来连接js和css文件，并添加后缀以在提供新版本时解决缓存问题。

在gulp start文件夹中运行dist后，我可以找到带有后缀的css和js文件，但在 Index.html 中引用未更新。

dist文件夹中的Index.html文件如下所示：

<head>
    <title>A Proper Angular App</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <ng-view class="view"></ng-view>
</body>
<script src="js/scripts.js"></script>

我应该如何配置gulpfile.js？

gulp.task('css', function() {
gulp.src(styles)
    .pipe(concat('main.css'))
    .pipe(cachebust.resources()) //
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({
        stream: true
    }));
});

gulp.task('js', function() {
    gulp.src(scripts)
        .pipe(concat('scripts.js'))
        .pipe(cachebust.resources()) //
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('html', function() {
    return gulp.src('./src/templates/**/*.html')
        .pipe(cachebust.references())
        .pipe(gulp.dest('dist/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('build', function() {
    gulp.start(['css', 'js', 'html'])
});

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        open: false,
        server: {
            baseDir: 'dist',
        }
    });
});

gulp.task('start', function() {
    devMode = true;
    gulp.start(['build', 'browser-sync']);
    gulp.watch(['./src/css/**/*.css'], ['css']);
    gulp.watch(['./src/js/**/*.js'], ['js']);
    gulp.watch(['./src/templates/**/*.html'], ['html']);
});

此外，我应该在HTML视图中添加后缀还是仅在CSS和js文件中添加后缀？

或者您可能建议使用其他方法解决缓存问题？

用Gulp 3缓存AngularJS应用的正确方法

0 个答案: