Question

我遇到了与缓存清除相关的问题。我的代码如下：

App.js

require('angular')
require('angular-ui-router')
var MainController = require('./controllers/MainController')

angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home'
            template: '<h1>Hello world !</h1>'

        })

}])
.controller('MainCtrl', ['$scope', 'MainController']);

Gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var connect = require('gulp-connect');
var browserify = require('browserify');
var source = require('vinyl-source-stream')
var CacheBuster = require('gulp-cachebust');

var cachebust = new CacheBuster();



gulp.task('connect', function(){
    connect.server({
        root: 'public',
        port: 4000 
    })
})

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

    return browserify('./app/app.js')
    .bundle()
    .pipe(source('main.js'))
    //save it to public/js/ directory
    .pipe(gulp.dest('./public/js/'))
})
gulp.task('sass', function(){
    return sass('sass/style.scss')
        .pipe(gulp.dest('./public/css'))
})
//Cache buster
gulp.task('build-css', function () {
    return gulp.src('styles/*.css')
        // Awesome css stuff 
        .pipe(cachebust.resources())
        .pipe(gulp.dest('public/css'));
});

gulp.task('build-html', ['build-css'], function () {
    return gulp.src('/*.html')
        // Awesome html stuff 
        .pipe(cachebust.references())
        .pipe(gulp.dest('public'));
});
gulp.task('build-js', ['build-css', 'build-html'], function () {
    return gulp.src('/*.js')
        // Awesome html stuff 
        .pipe(cachebust.resources())
        .pipe(gulp.dest('public/js'));
});
gulp.task('watch', function(){
    gulp.watch('app/**/*.js', ['browserify', 'build-js'])
    gulp.watch('sass/style.scss', ['sass', 'build-css'])
    gulp.watch('index.html', [ 'build-html'])
})

gulp.task('default', ['connect', 'watch'])

基本上我看到旧的html，js文件。 Haven没有检查其他扩展。但可能这不是一个正确的实施。

我使用了来自here的npm模块。

请帮助正确设置。

另外，请帮助我知道如何调试并检查gulp的哪些任务运行？就我的代码段而言，Console.log语句并不会吐出任何东西。

更新：的的index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>My App</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/main.js"></script>
</head>
<body>
  <div ng-controller="MainCtrl">
    <h1>{{message}}</h1>    
    <div ui-view></div>
  </div>
</body>
</html>

UDDATE 2

这里是git repo

https://github.com/kushalmahajan/angular_boilerplate2.git

Answer 1

仅仅看起来像一个gulp-cachebust问题。我使用gulp-cache

解决了这个问题

Answer 2

我不明白你的问题，你正在查看旧文件，所以

cachebust.resources（）/ cachebust.references（）

不起作用，对吗？如果是问题，我不知道正确的答案100％肯定，但查看文档似乎你首先必须更改MD5，然后重写引用。（它说根据他们的MD5校验和重写对重命名的资源的引用。）所以我想你必须先重命名（ CacheBuster.resources（）< / em>）然后重写（ CacheBuster.references（））但它只是一个理论（也许你已经按照正确的顺序调用它了。）

但是，如果您想调试gulp代码（如您所知）并且您有visual studio代码，则可以将此代码添加到launch.json文件

{ //Name of configuration. "name": "debug gulp", "type": "node", //Workspace relative or absolute path to the program. "program":"${workspaceRoot}/node_modules/gulp/bin/gulp.js", //Command line arguments passed to the program. "args":["server"], //Workspace path to the runtime to be debugged. "cwd": "${workspaceRoot}", //Enviroment variables passed to the program. "env":{}, "sourceMaps": true }

并在启动选项中调用“debug gulp”。您可以在gulp javascript（.js）代码中的任何地方放置断点。

Gulp cachebust不工作

2 个答案: